vue3

16.vue3/project3/package-lock.json

@@ -2926,7 +2926,7 @@
     },
     "node_modules/mitt": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
       "license": "MIT"
     },

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

16.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>

16.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>

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

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

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

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件1</h1>
+    <h1 class="h-26 text-6xl">我有{{ flower }}朵花</h1>
+    <button @click="sendFlower">给朋友一些花</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import emitter from "@/utils/emitter.js";
+let flower = ref(10);
+const sendFlower = () => {
+  emitter.emit("xxx", flower.value / 2);
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件2</h1>
+    <h1 class="h-26 text-6xl">收到了{{ num }}朵花</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onUnmounted } from "vue";
+import emitter from "@/utils/emitter.js";
+let num = ref<number>(0);
+emitter.on("xxx", (val: number) => {
+  num.value = val;
+});
+onUnmounted(() => {
+  emitter.off("xxx");
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

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

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