组件通信

vue3/my_Module/package-lock.json

@@ -8,6 +8,7 @@
       "name": "my-module",
       "version": "0.0.0",
       "dependencies": {
+        "mitt": "^3.0.1",
         "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.4.21"
       },
@@ -935,6 +936,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "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=="
+    },
     "node_modules/muggle-string": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",

vue3/my_Module/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "mitt": "^3.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.4.21"
   },

vue3/my_Module/src/App.vue

@@ -2,12 +2,16 @@
   <div class="app">
     <h1>组件通信</h1>
     <!-- <Props /> -->
-    <Event></Event>
+    <!-- <Event></Event> -->
+    <!-- <MittEvent/> -->
+    <Attrs/>
   </div>
 </template>
 
 <script setup lang="ts" name="App">
-import Event from './components/custom-event/Father.vue'
+import Attrs from './components/$attrs/GrandFather.vue'
+// import MittEvent from './components/mitt/Father.vue'
+// import Event from './components/custom-event/Father.vue'
 // import Props from './components/Props/Father.vue'
 </script>
 

vue3/my_Module/src/components/$attrs/Child.vue

@@ -1,12 +1,30 @@
 <template>
-    <div class="child">
-  
-    </div>
-  </template>
-  
-  <script setup name="Child4" lang="ts">
-  </script>
-  
-  <style>
-  
-  </style>
+  <div class="child">
+    <h1>子组件</h1>
+    <p>
+      {{ aa }}
+    </p>
+    <p>
+      {{ bb }}
+    </p>
+    <p>
+      {{ cc }}
+    </p>
+    <p>
+      {{ dd }}
+    </p>
+  </div>
+</template>
+
+<script setup name="Child4" lang="ts">
+defineProps(['aa','bb','cc','dd']);
+</script>
+
+<style scoped>
+.child {
+  width: 300px;
+  height: 300px;
+  background: rgb(0, 255, 247);
+  margin: 0 auto;
+}
+</style>

vue3/my_Module/src/components/$attrs/Father.vue

@@ -1,12 +1,21 @@
 <template>
+  <!-- 祖孙传参 $attrs -->
   <div class="father">
-
+    <h1>父组件</h1>
+    <Child v-bind="$attrs"></Child>
   </div>
 </template>
 
 <script setup name="Father4" lang="ts">
+import Child from './Child.vue';
 </script>
 
-<style>
+<style scoped>
 
-</style>
+.father {
+  width: 600px;
+  height: 600px;
+  background: plum;
+  margin: 0 auto;
+}
+</style>

vue3/my_Module/src/components/$attrs/GrandFather.vue

@@ -1,12 +1,30 @@
 <template>
   <div class="grandFather">
-
+    <h1>祖父</h1>
+    <h3>{{ a }}</h3>
+    <h3>{{ b }}</h3>
+    <h3>{{ c }}</h3>
+    <h3>{{ d }}</h3>
+    <Father :aa='a' :bb="b" :cc="c" :dd="d"></Father>
   </div>
 </template>
 
 <script setup name="GrandFather4" lang="ts">
+import Father from './Father.vue';
+import {ref} from 'vue';
+let a = ref(1);
+let b = ref(2);
+let c = ref(3);
+let d = ref(4);
+
 </script>
 
-<style>
+<style scoped>
 
-</style>
+.grandFather {
+  width: 900px;
+  height: 900px;
+  background: yellowgreen;
+  margin: 0 auto;
+}
+</style>

vue3/my_Module/src/components/mitt/Child1.vue

@@ -1,12 +1,24 @@
 <template>
-    <div class="child">
-  
-    </div>
-  </template>
-  
-  <script setup name="Child31" lang="ts">
-  </script>
-  
-  <style>
-  
-  </style>
+  <div class="child">
+    <h1>老大</h1>
+    <h4>玩具：{{toy}}</h4>
+    <button @click="emitter.emit('send-toy',toy)">把玩具给老二</button>
+  </div>
+</template>
+
+<script setup name="Child31" lang="ts">
+import emitter from '@/utils/emitter.ts';
+import {ref} from 'vue';
+let toy = ref("迪迦奥特曼");
+// emitter.on("thing",(val) =>{
+//   console.log(val)
+// })
+</script>
+
+<style scoped>
+  .child {
+    width: 400px;
+    height: 300px;
+    background: hotpink;
+  }
+</style>

vue3/my_Module/src/components/mitt/Child2.vue

@@ -1,12 +1,29 @@
 <template>
-    <div class="child">
-  
-    </div>
-  </template>
-  
-  <script setup name="Child32" lang="ts">
-  </script>
-  
-  <style>
-  
-  </style>
+  <div class="child">
+    <h1>老二</h1>
+    <p v-show="gift">老大给我的玩具是:{{ gift }}</p>
+    <button @click="emitter.emit('thing',someThing)">告诉老大一个事</button>
+  </div>
+</template>
+
+<script setup name="Child32" lang="ts">
+import emitter from '@/utils/emitter.ts';
+import {ref, onUnmounted} from 'vue';
+let gift = ref("");
+let someThing = ref("瑶瑶是个老六");
+emitter.on("send-toy",(val)=>{
+  // console.log(val);
+  gift.value = val;
+})
+onUnmounted(()=>{
+  emitter.off("send-toy");
+})
+</script>
+
+<style scoped>
+  .child {
+    width: 400px;
+    height: 300px;
+    background: yellowgreen;
+  }
+</style>

vue3/my_Module/src/components/mitt/Father.vue

@@ -1,12 +1,21 @@
 <template>
+  <!-- 任意组件 -->
   <div class="father">
-
+    <Child1></Child1>
+    <hr>
+    <Child2></Child2>
   </div>
 </template>
 
 <script setup name="Father3" lang="ts">
+import Child1 from './Child1.vue';
+import Child2 from './Child2.vue';
 </script>
 
-<style>
-
+<style scoped>
+.father {
+  width: 800px;
+  height: 800px;
+  background: skyblue;
+}
 </style>

vue3/my_Module/src/utils/emitter.ts

@@ -0,0 +1,26 @@
+// 1.引入
+import mitt from 'mitt';
+// 2.定义
+const emitter = mitt();
+// mitt 配合着发布订阅模式使用
+// 1.发布
+// emitter.on("test1",()=>{
+//     console.log("订阅一")
+// })
+// emitter.on("test2",()=>{
+//     console.log("订阅二")
+// })
+// // 2.订阅
+// setInterval(()=>{
+//     emitter.emit("test1");
+//     emitter.emit("test2");
+// },2000)
+// // 3.取消订阅
+// setTimeout(()=>{
+//     emitter.off("test1");
+//     emitter.off("test2");
+//     // 取消全部时间
+//     emitter.all.clear()
+// },7000)
+// 3.抛出
+export default emitter;

vue3/初始.md

@@ -9,4 +9,6 @@ npm install vite-plugin-vue-setup-extend
 5. 安装nanoid
 npm install nanoid
 6. 安装pinia
-npm install pinia
+npm install pinia
+7. 安装mitt
+npm install mitt