组件通信

17.Vue3/project3/src/App.vue

@@ -10,7 +10,7 @@
 				<RouterLink active-class="active" class="list-group-item" to="/props">1. props</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>
+				<RouterLink active-class="active" class="list-group-item" to="/refs-parent">4. $refs-$parent</RouterLink>
 				<RouterLink active-class="active" class="list-group-item" to="/attrs">5. $attrs</RouterLink>
 				<RouterLink active-class="active" class="list-group-item" to="/provide">6. provide-inject</RouterLink>
 				<RouterLink active-class="active" class="list-group-item" to="/slot1">7. 默认插槽</RouterLink>

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

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>Child1</h1>
+    <h3>我有{{ book }}本书</h3>
+    <h1>我有{{ money }}元</h1>
+    <button @click="handleBook">给父组件十本书</button>
+    <button @click="giveBook($parent)">给父亲五本书</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let book = ref(50);
+let new1 = ref(0);
+let money = ref(1000);
+function handleBook() {
+    new1.value += 10;
+    book.value -= 10;
+}
+function giveBook(val) {
+    console.log(val,'形参')
+    val.bookNum += 5;
+}
+defineExpose({book,new1,money})
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1>Child2</h1>
+    <h1>我有{{ money }}元</h1>
+    <h3>我有{{ flower }}朵花</h3>
+    <button @click="handleFlower">给父组件十朵花</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let flower = ref(99);
+let new2 = ref(0);
+let money = ref(3000);
+function handleFlower() {
+    new2.value += 10;
+    flower.value -= 10;
+}
+defineExpose({flower,new2,money})
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,12 +1,48 @@
 <template>
   <div>
     <h1>$refs-$parent</h1>
+    <h2>child1给了我{{ bookNum }}本书</h2>
+    <button @click="changeNum1">改变Child1书的数量</button>
+    <button @click="changeNum2">改变Child2花的数量</button>
+    <h1 v-if="c1">Child1给了我{{ c1.new1 }}本书</h1>
+    <button @click="handleMoney($refs)">获取他们的钱</button>
+    <hr>
+    <hr>
+    <hr>
+    <hr>
+    <Child1 ref="c1"></Child1>
+    <hr>
+    <hr>
+    <hr>
+    <hr>
+    <Child2 ref="c2"></Child2>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import Child1 from "./Child1.vue";
+import Child2 from "./Child2.vue";
+let c1 = ref();
+let c2 = ref();
+let bookNum  = ref(0);
+// console.log(c1.value,c2.value);
+const changeNum1 = () => {
+  console.log(c1.value);
+  c1.value.book--;
+}
+const changeNum2 = () => {
+  console.log(c2.value);
+  c2.value.flower--;
+}
+function handleMoney(val:any) {
+  console.log(val);
+  for(let key in val) {
+    console.log(key)
+    val[key].money -= 200;
+  }
+}
+defineExpose({bookNum})
 </script>
 
 <style lang="scss" scoped>