vue3

13.Vue3/project3/package.json

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

13.Vue3/project3/src/App.vue

@@ -8,8 +8,10 @@
 			<div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
 				<!-- 导航区 -->
 				<RouterLink active-class="active" class="list-group-item" to="/props">1. props</RouterLink>
-				<RouterLink active-class="active" class="list-group-item" to="/mitt">2. mitt</RouterLink>
-				<RouterLink active-class="active" class="list-group-item" to="/custom">3. custom</RouterLink>
+				<RouterLink active-class="active" class="list-group-item" to="/custom">2. custom</RouterLink>
+				<RouterLink active-class="active" class="list-group-item" to="/mitt">3. mitt</RouterLink>
+				<RouterLink active-class="active" class="list-group-item" to="/refs-parent">4. refs-parent</RouterLink>
+				
 			</div>
 			<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
 				<div class="panel-body">

13.Vue3/project3/src/router/index.ts

@@ -11,13 +11,18 @@ const router = createRouter({
     {
       path: '/mitt',
       name: 'Mitt',
-      component: () =>import('../views/Mitt/index.vue'),
+      component: () =>import('../views/Mitt/Father.vue'),
     },
     {
       path: '/custom',
       name: 'Custom',
       component: () =>import('../views/Custom/Father.vue'),
     },
+    {
+      path: '/refs-parent',
+      name: 'refs-parent',
+      component: () =>import('../views/Refs-Parent/Father.vue'),
+    },
   ],
 })
 

13.Vue3/project3/src/utils/emitter.ts

@@ -0,0 +1,15 @@
+// 1.引入
+import mitt from 'mitt';
+// 2.调用
+const emitter = mitt()
+// 3.绑定
+// emitter.on('foo', e => console.log('foo', e) )
+// 4.监听
+// emitter.emit('foo', { a: 'b' })
+// 5.解绑
+// emitter.off('foo', xxx)  // unlisten
+// 6.全部清除
+// emitter.all.clear()
+// 7.抛出
+export default emitter;
+

13.Vue3/project3/src/views/Mitt/Child1.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>child1</h1>
+    <h3>我有{{money}}元</h3>
+    <button @click="sendMoney">给我兄弟一些钱</button>
+  </div>
+</template>
+
+<script setup>
+import emitter from '@/utils/emitter.ts';
+import { ref, reactive } from "vue";
+let money = ref(1000);
+function sendMoney() {
+  emitter.emit('foo', money.value)
+}
+</script>
+<style lang="scss" scoped></style>

13.Vue3/project3/src/views/Mitt/Child2.vue

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

13.Vue3/project3/src/views/Mitt/Father.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+      Mitt
+      <hr>
+      <hr>
+      <Child1/>
+      <hr>
+      <hr>
+      <hr>
+      <hr>
+      <Child2/>
+      <hr>
+    </div>
+  </template>
+  
+  <script setup>
+  import Child1 from './Child1.vue'
+  import Child2 from './Child2.vue'
+  import { ref, reactive} from 'vue'
+  
+  </script>
+  <style lang='scss' scoped>
+  
+  </style>

13.Vue3/project3/src/views/Mitt/index.vue

@@ -1,13 +0,0 @@
-<template>
-    <div>
-      Mitt
-    </div>
-  </template>
-  
-  <script setup>
-  import { ref, reactive} from 'vue'
-  
-  </script>
-  <style lang='scss' scoped>
-  
-  </style>

13.Vue3/project3/src/views/Refs-Parent/Child1.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>child1</h1>
+    <h3>书：{{book}}</h3>
+    <h3>压岁钱:{{money}}</h3>
+    <h3>我有{{ car }}辆车</h3>
+    <button @click="giveBook($parent)">给父亲书</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { defineExpose } from "vue";
+let car = ref(10);
+let book = ref(100);
+let money = ref(100000)
+function giveBook(val) {
+  console.log(val.num,'哈哈哈')
+  val.num++;
+  book.value -=1
+}
+defineExpose({car,money})
+</script>
+<style lang="scss" scoped></style>

13.Vue3/project3/src/views/Refs-Parent/Child2.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>child2</h1>
+    <h3>压岁钱:{{money}}</h3>
+    <h3>我有{{ house }}套房</h3>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+let house = ref(8);
+let money = ref(100000)
+defineExpose({house,money})
+</script>
+<style lang="scss" scoped></style>

13.Vue3/project3/src/views/Refs-Parent/Father.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <h1>$refs-$parent</h1>
+    <h3>孩子给了我{{num}}本书</h3>
+    <button @click='changeCar'>改变老大的车</button>
+    <button @click='changeHouse'>改变老二的房</button>
+    <button @click='saveMoney($refs)'>保管压岁钱</button>
+    <hr>
+    <hr>
+    <Child1 ref='c1'/>
+    <hr>
+    <hr>
+    <hr>
+    <hr>
+    <Child2 ref='c2'/>
+    <hr>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import Child1 from './Child1.vue'
+import Child2 from './Child2.vue'
+import { ref, reactive} from 'vue'
+let num = ref(0)
+let c1:any = ref();
+let c2:any = ref();
+function changeCar() {
+  // console.log(c1.value)
+  c1.value.car -= 1;
+}
+function changeHouse() {
+  // console.log(c1.value)
+  c2.value.house -= 1;
+}
+//  [propName:string]:any
+function saveMoney(refs:{[propName:string]:any}) {
+  console.log(refs,'refs')
+  for(let key in refs) {
+    console.log(key,'key')
+    refs[key].money -= 1000;
+  }
+}
+defineExpose({num})
+</script>
+<style lang='scss' scoped>
+
+</style>