组件通信

12.vue3/project3/package-lock.json

@@ -8,6 +8,7 @@
       "name": "project3",
       "version": "0.0.0",
       "dependencies": {
+        "mitt": "^3.0.1",
         "vue": "^3.5.29",
         "vue-router": "^5.0.3"
       },
@@ -2267,6 +2268,12 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/mlly": {
       "version": "1.8.0",
       "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.8.0.tgz",

12.vue3/project3/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "mitt": "^3.0.1",
     "vue": "^3.5.29",
     "vue-router": "^5.0.3"
   },

12.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;

12.vue3/project3/src/views/Mitt/Child1.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1>Child1</h1>
+    <h3>我有{{ book }}本书</h3>
+    <button @click="sendBook">给我兄弟两本书</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import emitter from "../../utils/emitter";
+import { ref, reactive } from "vue";
+let book = ref(10);
+function sendBook() {
+  emitter.emit("foo", book.value - 8);
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project3/src/views/Mitt/Child2.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>Child2</h1>
+    <h3>我有{{ toy }}个玩具</h3>
+    <h2>我的兄弟给了我{{ end }}本书</h2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import emitter from "../../utils/emitter";
+import { ref, onUnmounted } from "vue";
+let toy = ref(20);
+let end = ref(0);
+emitter.on("foo", (val: number) => {
+  console.log(val);
+  end.value = val;
+});
+onUnmounted(() => {
+  emitter.off("foo");
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project3/src/views/Mitt/Father.vue

@@ -1,11 +1,21 @@
 <template>
     <div>
-      Mitt
+      <h1>Mitt</h1>
+      <hr>
+      <hr>
+      <hr>
+      <Child1></Child1>
+      <hr>
+      <hr>
+      <hr>
+      <Child2></Child2>
     </div>
   </template>
   
   <script setup>
-  import { ref, reactive} from 'vue'
+  import { ref, reactive} from 'vue';
+  import Child1 from './Child1.vue';
+  import Child2 from './Child2.vue';
   
   </script>
   <style lang='scss' scoped>