From aab48951d032ba56c5a9656363b5aea82dad0765 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Fri, 31 Mar 2023 14:39:13 +0800
Subject: [PATCH] =?UTF-8?q?provide=E4=B8=8Einject?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20_脚手架/vue3_test/src/App.vue            | 53 +++++++------------
 .../vue3_test/src/components/Child.vue        | 21 ++++++++
 20_脚手架/vue3_test/src/components/Son.vue | 26 +++++++++
 3 files changed, 67 insertions(+), 33 deletions(-)
 create mode 100644 20_脚手架/vue3_test/src/components/Child.vue
 create mode 100644 20_脚手架/vue3_test/src/components/Son.vue

diff --git a/20_脚手架/vue3_test/src/App.vue b/20_脚手架/vue3_test/src/App.vue
index e0d4f12..06cfe9b 100644
--- a/20_脚手架/vue3_test/src/App.vue
+++ b/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>
\ No newline at end of file
diff --git a/20_脚手架/vue3_test/src/components/Child.vue b/20_脚手架/vue3_test/src/components/Child.vue
new file mode 100644
index 0000000..792b1ea
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/20_脚手架/vue3_test/src/components/Son.vue b/20_脚手架/vue3_test/src/components/Son.vue
new file mode 100644
index 0000000..77b4493
--- /dev/null
+++ b/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>
\ No newline at end of file