vue组件通信

20.vue3/project3/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.2",
+    "mitt": "^3.0.1",
     "sass": "^1.101.0",
     "tailwindcss": "^4.3.2",
     "vue": "^3.5.38",

20.vue3/project3/src/router/index.ts

@@ -9,6 +9,16 @@ const router = createRouter({
       name: 'Props',
       component: () => import('../views/Props/Father.vue'),
     },
+    {
+      path: '/mitt',
+      name: 'mitt',
+      component: () => import('../views/mitt/Father.vue'),
+    },
+    {
+      path: '/refs',
+      name: 'Refs',
+      component: () => import('../views/Refs-Parent/Father.vue'),
+    },
     {
       path: '/custom',
       name: 'Custom',

20.vue3/project3/src/utils/emitter.js

@@ -0,0 +1,22 @@
+import mitt from 'mitt'
+
+const emitter = mitt()
+
+// listen to an event
+// emitter.on('foo', e => console.log('foo', e))
+
+// // listen to all events
+// emitter.on('*', (type, e) => console.log(type, e))
+
+// // fire an event
+// emitter.emit('foo', { a: 'b' })
+
+// // clearing all events
+// emitter.all.clear()
+
+// // working with handler references:
+// function onFoo() { }
+// emitter.on('foo', onFoo)   // listen
+// emitter.off('foo', onFoo)  // unlisten
+
+export default emitter;

20.vue3/project3/src/views/Refs-Parent/Child1.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件1</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/views/Refs-Parent/Child2.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件2</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/views/Refs-Parent/Father.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Refs-Parent</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Child1></Child1>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Child2></Child2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Child1 from "./Child1.vue";
+import Child2 from "./Child2.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/views/mitt/Child1.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件1</h1>
+    <h3 class="text-2xl h-12">我有{{ money }}元</h3>
+    <button @click="sendMoney">给我兄弟点</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import emitter from "@/utils/emitter.js";
+import { ref, reactive } from "vue";
+let money = ref(1000);
+const sendMoney = () => {
+  // 触发事件
+  emitter.emit("xxx", 200);
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/views/mitt/Child2.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件2</h1>
+    <h3 class="text-2xl h-12">兄弟给了我{{ num }}元</h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import emitter from "@/utils/emitter.js";
+import { ref, reactive, onUnmounted } from "vue";
+let num = ref(0);
+// 方法 监听
+emitter.on("xxx", (val: number) => {
+  num.value += val;
+});
+onUnmounted(() => {
+  emitter.off("xxx");
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/views/mitt/Father.vue

@@ -5,11 +5,16 @@
     <h3 class="h-16 text-4xl"></h3>
     <hr class="h-15" />
     <hr class="h-15" />
+    <Child1></Child1>
     <hr class="h-15" />
+    <hr class="h-15" />
+    <Child2></Child2>
   </div>
 </template>
 
 <script lang="ts" setup>
+import Child1 from "./Child1.vue";
+import Child2 from "./Child2.vue";
 </script>
 
 <style lang="scss" scoped>