From d297111365cb9b50d74e523ad7ce44a6c41d4712 Mon Sep 17 00:00:00 2001
From: heiye111 <heiye111@aliyun.com>
Date: Sun, 5 Oct 2025 20:21:07 +0800
Subject: [PATCH] =?UTF-8?q?052~058:=E5=B0=9A=E7=A1=85=E8=B0=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=80=9A=E4=BF=A1=E7=9B=B8=E5=85=B3=E5=AD=A6=E4=B9=A0?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  |  1 +
 package.json                       |  1 +
 src/App.vue                        |  8 ++---
 src/components/01_props/Child.vue  | 40 +++++++++++++++++++++++
 src/components/01_props/Child2.vue | 51 ++++++++++++++++++++++++++++++
 src/components/01_props/Father.vue | 48 ++++++++++++++++++++++++++++
 src/components/AtInput.vue         | 12 +++++++
 src/main.ts                        |  2 ++
 src/utils/emitter.ts               | 26 +++++++++++++++
 9 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 src/components/01_props/Child.vue
 create mode 100644 src/components/01_props/Child2.vue
 create mode 100644 src/components/01_props/Father.vue
 create mode 100644 src/components/AtInput.vue
 create mode 100644 src/utils/emitter.ts

diff --git a/package-lock.json b/package-lock.json
index 21d59fd..1f21011 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index d60376f..8c2a6d7 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index baf72e4..750dc24 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,12 @@
 <template>
   <div>
     <h1>我的App组件!</h1>
-    <Count />
-    <br />
-    <LoveTalk />
+    <Father />
   </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>
\ No newline at end of file
diff --git a/src/components/01_props/Child.vue b/src/components/01_props/Child.vue
new file mode 100644
index 0000000..d6895f9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/01_props/Child2.vue b/src/components/01_props/Child2.vue
new file mode 100644
index 0000000..8d3ad48
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/01_props/Father.vue b/src/components/01_props/Father.vue
new file mode 100644
index 0000000..5404447
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/AtInput.vue b/src/components/AtInput.vue
new file mode 100644
index 0000000..03fe3c3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 2061901..0681d2f 100644
--- a/src/main.ts
+++ b/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应用程序实例
diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts
new file mode 100644
index 0000000..240f242
--- /dev/null
+++ b/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