vue3

11.vue3/vue-project2/package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue-project2",
       "version": "0.0.0",
       "dependencies": {
+        "mitt": "^3.0.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -2364,7 +2365,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mrmime": {

11.vue3/vue-project2/package.json

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

11.vue3/vue-project2/src/utils/emitter.ts

@@ -0,0 +1,24 @@
+import mitt from 'mitt'
+
+const emitter = mitt()
+
+// // 绑定/监听事件
+// emitter.on('foo', e => console.log('foo', e) )
+
+// // 绑定/监听全部事件
+// emitter.on('*', (type, e) => console.log(type, e) )
+
+// // 触发事件
+// emitter.emit('foo', { a: 'b' })
+
+// // 清除全部
+// emitter.all.clear()
+
+// // 清除单个事件
+// emitter.off('foo', e => console.log('foo', e) )
+// // working with handler references:
+// function onFoo() {}
+// emitter.on('foo', onFoo)   // listen
+// emitter.off('foo', onFoo)  // unlisten
+
+export default emitter;

11.vue3/vue-project2/src/views/Attrs/Child.vue

@@ -1,12 +1,16 @@
 <template>
   <div>
     子级
+    <hr>
+    <hr>
+    <hr>
+    <GrandSon v-bind="$attrs"></GrandSon>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import GrandSon from "./GrandSon.vue";
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Attrs/Father.vue

@@ -1,12 +1,23 @@
 <template>
   <div>
-    父级
+    <h1>
+      Attrs
+    </h1>
+    <p>我有{{ car }}辆车</p>
+    <hr>
+    <hr>
+    <Child :carNum="newCar" :addCar="getMain"></Child>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import Child  from "./Child.vue";
+let car = ref(100)
+let newCar = ref(car.value / 2);
+function getMain(val:number) {
+  newCar.value += val;
+}
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Attrs/GrandSon.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
     孙级
+    <p>祖父给了我{{ carNum }}辆车</p>
+    <button @click="addCar(2)">增加</button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+defineProps(['carNum','addCar'])
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Mitt/Child1.vue

@@ -1,10 +1,18 @@
 <template>
-  <div>子级</div>
+  <div>
+    <h1>Child1</h1>
+    <h3>{{ money }}元</h3>
+    <button @click="sendMoney">分一半</button>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import emitter from "@/utils/emitter";
 import {ref,reactive} from "vue" 
-
+let money = ref(1000);
+function sendMoney() {
+  emitter.emit('foo',money.value / 2)
+}
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Mitt/Child2.vue

@@ -1,10 +1,20 @@
 <template>
-  <div>子级</div>
+  <div>
+    <h1>Child2</h1>
+    <h3>我大哥给了我{{ num }}</h3>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import emitter from "@/utils/emitter";
+import {ref,reactive,onUnmounted} from "vue" 
+let num:any = ref(0)
+emitter.on('foo',(val)=>{
+  num.value = val;
+})
+onUnmounted(()=>{
+  emitter.off('foo')
+})
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-project2/src/views/Mitt/Father.vue

@@ -1,12 +1,20 @@
 <template>
   <div>
-    父级
+    <h1>Mitt</h1>
+    <hr>
+    <hr>
+    <Child1></Child1>
+    <hr>
+    <hr>
+    <hr>
+    <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>