组件通信

12.vue3/project3/src/views/Refs-Parent/Child1.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h1>Child1</h1>
+    <h3>我有{{ book }}本书</h3>
+    <button @click="givebook($parent)">给父亲书</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" ;
+let book = ref(10);
+function givebook(val:any) {
+    console.log(val.num,'val')
+    book.value--;
+    val.num++;
+}
+defineExpose({book})
+// defineProps([])
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project3/src/views/Refs-Parent/Child2.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Child2</h1>
+    <h2>我有一朵{{ flower }}花</h2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue";
+let flower = ref("牡丹")
+defineExpose({flower})
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project3/src/views/Refs-Parent/Father.vue

@@ -1,11 +1,40 @@
 <template>
   <div>
     <h1>$refs-$parent</h1>
+    <p>老大给了我{{ num }}本书</p>
+    <button @click="changeBook">修改老大中书本的数量</button>
+    <button @click="changeFlower">修改老幺中花的品种</button>
+    <button @click="changeMain($refs)">修改</button>
+    <hr>
+    <hr>
+    <hr>
+    <Child1 ref="c1"></Child1>
+    <hr>
+    <hr>
+    <hr>
+    <Child2 ref="c2"></Child2>
   </div>
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive} from 'vue'
+import { ref, reactive} from 'vue';
+import Child1 from './Child1.vue';
+import Child2 from './Child2.vue';
+let num = ref(0);
+let c1 = ref();
+let c2 = ref();
+function changeBook() {
+  c1.value.book += 2;
+}
+function changeFlower() {
+  c2.value.flower = '水仙';
+}
+function changeMain(val:any) {
+  console.log(val)
+  val.c1.book += 3;
+  val.c2.flower = '丁香';
+}
+defineExpose({num})
 </script>
 <style lang='scss' scoped>