组件通信

12.vue3/project3/src/views/Attrs/Child.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1>Child</h1>
+    <hr>
+    <hr>
+    <hr>
+    <GrandSon v-bind="$attrs"></GrandSon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import GrandSon from "./GrandSon.vue";
+
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project3/src/views/Attrs/Father.vue

@@ -1,10 +1,18 @@
 <template>
   <div>
-    <h1>Attrs</h1></div>
+    <h1>Attrs</h1>
+    <h2>我有{{ num }}辆车</h2>
+    <hr>
+    <hr>
+    <hr>
+    <Child :x="num/2"></Child>
+    </div>
 </template>
 
 <script setup>
-import { ref, reactive} from 'vue'
+import { ref, reactive} from 'vue';
+import Child from './Child.vue';
+let num = ref(10);
 </script>
 <style lang='scss' scoped>
 

12.vue3/project3/src/views/Attrs/GrandSon.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>GrandSon</h1>
+    <h3>祖父给了我{{ x }}辆车</h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+defineProps(['x'])
+</script>
+
+<style lang="scss" scoped>
+</style>