组件通信

15.vue3/vue_project2/src/App.vue

@@ -11,6 +11,8 @@
 				<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="/ref1">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>
 			
 			</div>
 			<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">

15.vue3/vue_project2/src/router/index.ts

@@ -23,6 +23,16 @@ const router = createRouter({
       name: 'Custom',
       component: () =>import('../views/Custom/Father.vue'),
     },
+    {
+        path:'/attrs',
+        name: 'attrs',
+        component: () => import("../views/Attrs/Father.vue")
+    },
+    {
+        path:'/provide',
+        name: 'provide',
+        component: () => import("../views/Provide-inject/Father.vue")
+    },
   ],
 })
 

15.vue3/vue_project2/src/views/Attrs/Child.vue

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

15.vue3/vue_project2/src/views/Attrs/Father.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h1>Attrs</h1>
+    <h3>我有{{ car }}辆车</h3>
+    <hr>
+    <hr>
+    <Child :carNumber="car" :addCar="addMain" />
+  </div>
+</template>
+
+<script setup>
+import Child from './Child.vue';
+import {ref,reactive} from 'vue'
+let car = ref(10);
+function addMain(num) {
+  console.log("执行")
+  car.value += num;
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

15.vue3/vue_project2/src/views/Attrs/GrandSon.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>GrandSon</h1>
+    <p>我继承了{{ carNumber }}辆车</p>
+    <button @click="addCar(10)">增加</button>
+  </div>
+</template>
+
+<script setup>
+import {ref,reactive} from 'vue'
+let num = ref(0);
+defineProps(['carNumber','addCar'])
+</script>
+
+<style lang="scss" scoped>
+</style>

15.vue3/vue_project2/src/views/Provide-inject/Child.vue

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

15.vue3/vue_project2/src/views/Provide-inject/Father.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1>Provide-inject</h1>
+    <h3>我有{{ car }}辆车</h3>
+    <hr>
+    <hr>
+    <Child/>
+  </div>
+</template>
+
+<script  setup>
+import Child from './Child.vue';
+import {ref,reactive,provide} from 'vue'
+let car = ref(10);
+provide('aa',{car})
+</script>
+
+<style lang="scss" scoped>
+</style>

15.vue3/vue_project2/src/views/Provide-inject/GrandSon.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>GrandSon</h1>
+    <p>我继承了{{ a1.car }}辆车</p>
+  </div>
+</template>
+
+<script setup>
+import {ref,reactive,inject} from 'vue'
+let a1 = inject("aa")
+console.log(a1.car)
+</script>
+
+<style lang="scss" scoped>
+</style>