provide与inject

20_脚手架/vue3_test/src/App.vue

@@ -1,44 +1,31 @@
 <template>
-  <input type="text" v-model="keyWord">
-  <h3>{{keyWord}}</h3>
+  <div class="app">
+    <h3>我是app组件（祖）{{name}}-{{price}}</h3>
+    <child/>
+  </div>
 </template>
 
 <script>
-import {ref, customRef} from "vue";
+import child from "@/components/Child.vue";
+import {reactive, toRefs, provide} from "vue";
 
 export default {
   name: 'App',
+  components:{child},
   setup() {
-    // 自定义ref
-    function myRef(value) {
-      let timer
-      // console.log('---myRef---', value)
-      return customRef((track,trigger)=>{
-        return {
-          get() {
-            console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
-            track()  // 通知vue追踪数据变化
-            return value
-          },
-          set(newValue) {
-            console.log(`有人从myRef这个容器中数据改为了：${newValue}`)
-            clearTimeout(timer)
-            timer = setTimeout(()=>{
-              value = newValue
-              trigger()  //通知vue去重新解析模板
-            }, 500)
-          }
-        }
-      })
-    }
-
-    // let keyWord = ref('hello')  // 使用默认的ref
-    let keyWord = myRef('hello')
-
-    return {
-      keyWord,
-    }
+    let car = reactive({
+      name:'奔驰',
+      price: '40W'
+    })
+    provide('car', car)  //给自己的后代组件传递数据
+    return {...toRefs(car)}
   }
-
 }
 </script>
+
+<style>
+  .app{
+    background-color: gray;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/src/components/Child.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="child">
+    <h3>我是child组件（子）</h3>
+    <son/>
+  </div>
+</template>
+
+<script>
+import son from "@/components/Son.vue";
+export default {
+  name: "Child",
+  components:{son}
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/src/components/Son.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="son">
+    <h3>我是son组件（孙）{{car.name}}-{{car.price}}</h3>
+  </div>
+</template>
+
+<script>
+import {inject} from "vue";
+
+export default {
+  name: "Son",
+  setup() {
+    let car = inject('car')
+    console.log('---son---', car)
+
+    return {car}
+  }
+}
+</script>
+
+<style scoped>
+  .son{
+    background-color: orange;
+    padding: 10px;
+  }
+</style>