052~058:尚硅谷组件通信相关学习示例

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.12.2",
+        "mitt": "^3.0.1",
         "pinia": "^3.0.3",
         "ulid": "^3.0.1",
         "uuid": "^13.0.0",

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^1.12.2",
+    "mitt": "^3.0.1",
     "pinia": "^3.0.3",
     "ulid": "^3.0.1",
     "uuid": "^13.0.0",

src/App.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
     <h1>我的App组件!</h1>
-    <Count />
+    <Father />
-    <br />
-    <LoveTalk />
   </div>
 </template>
 
 <script setup lang="ts" name="App">
-import Count from '@/components/Count.vue' // 导入Count组件的count变量
+
-import LoveTalk from './components/LoveTalk.vue';
+import Father from './components/01_props/Father.vue';
 
 </script>

src/components/01_props/Child.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="child">
+    <h1>子组件0001</h1>
+    <h4>奥特曼:{{ toy }}</h4>
+    <h3>汽车:{{ toy }}</h3>
+    <h3>a:{{ a }} </h3>
+    <h3> b:{{ b }} </h3>
+    <h3>c:{{ c }} </h3>
+    <h3>d:{{ d }} </h3>
+    <button @click="emitter.emit('send-toy',toy)">送奥特曼</button>
+ 
+    <Child2 v-bind="$attrs" /> 
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { ref, onMounted } from 'vue';
+import Child2 from './Child2.vue';
+
+import emitter from '@/utils/emitter';
+
+const toy = ref('奥特曼');
+defineProps(['a','b','c','d'])
+
+
+
+
+</script>
+
+<style scoped>
+
+.child {
+  margin-top: 30px;
+border-radius: 10px;
+  padding: 10px;
+  background-color: rgb(133, 156, 96);
+  box-shadow: 0 0 10px;
+}
+</style>

src/components/01_props/Child2.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="child">
+    <h1>子组件0002</h1>
+    <h4>电影:{{ dvd }}</h4>
+    <h3 v-if="toy">玩具:{{ toy }}</h3>
+    <h3>e:{{ e }} </h3>
+    <h3> a:{{ a }} </h3>
+    <h3> f:{{ f }} </h3>
+    <button @click="">送奥特曼</button>
+ 
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { ref, onUnmounted } from 'vue';
+
+import emitter from '@/utils/emitter';
+emitter.on('send-toy',(value:any)=>{
+  console.log('子组件emitter事件触发了!',value);
+  toy.value = value;
+})
+
+const dvd = ref('蓝光电影');
+const toy = ref('');
+defineProps(['e','f','a'])
+
+onUnmounted(()=>{
+  emitter.off('send-toy')
+  console.log('emitter事件被卸载了!');
+})
+
+//defineProps(['car','sendcar'])
+// const emit = defineEmits(['send-toy'])
+// onMounted(()=>{
+//   setTimeout(()=>{
+//     emit('send-toy')
+//   },2000)
+// })
+</script>
+
+<style scoped>
+
+.child {
+    margin-top: 30px;
+border-radius: 10px;
+  padding: 10px;
+  background-color: rgb(133, 156, 96);
+  box-shadow: 0 0 10px;
+}
+</style>

src/components/01_props/Father.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="father">
+    <h1>父组件</h1>
+    <h3>汽车:{{ car }}</h3>
+    <h3 v-show="toy">奥特曼:{{ toy }}</h3>
+    <h3>a:{{ a }} </h3>
+    <h3> b:{{ b }} </h3>
+    <h3>c:{{ c }} </h3>
+    <h3>d:{{ d }} </h3>
+    <Child :a="a" :b="b" :c="c" :d="d" v-bind="{e:200,f:230}"/>
+    
+    <!-- <AtInput v-model="car" placeholder="请输入汽车名称" /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import Child from './Child.vue';
+
+import AtInput from '@/components/AtInput.vue';
+
+import { ref } from 'vue';
+
+let a = ref('123')
+let b = ref('1234')
+let c = ref('1235')
+let d = ref('1236')
+const car = ref('');
+const toy = ref('');
+
+function getToy(value:any){
+    console.log('父组件自定义事件触发了!',value);
+    toy.value = value;
+}
+
+</script>
+
+<style scoped>
+
+.father {
+  margin-top: 30px;
+border-radius: 10px;
+  padding: 10px;
+  background-color: rgb(182, 184, 91);
+  box-shadow: 0 0 10px;
+}
+
+</style>

src/components/AtInput.vue

@@ -0,0 +1,12 @@
+<template>
+
+<input type="text" :value="modelValue" @input="emit('update:modelValue',(<any>$event.target).value)">
+
+    </template>
+
+
+<script setup lang="ts">
+defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
+</script>

src/main.ts

@@ -3,6 +3,8 @@ import { createApp } from "vue";
 import App from "./App.vue";
 //引入pinia
 import { createPinia } from "pinia";
+
+import emitter from "@/utils/emitter"
 // 创建Pinia实例
 const pinia = createPinia();
 // 创建Vue应用程序实例

src/utils/emitter.ts

@@ -0,0 +1,26 @@
+// 事件总线
+import mitt from 'mitt'
+// 实例化事件总线
+const emitter = mitt()
+
+// emitter.on('test',(data)=>{
+//     console.log('test',data)
+// })
+// emitter.on('test2',(data)=>{
+//     console.log('test2',data)
+// })
+
+// setInterval(()=>{
+//     emitter.emit('test',{name:'zhangsan撒大大撒旦'})
+//     emitter.emit('test2',{name:'lisi大苏打实打实'})
+
+// },1000)
+
+// setInterval(()=>{
+//     emitter.off('test')
+// },3000)
+
+
+
+// 导出事件总线
+export default emitter