provide与inject创建目录

20_脚手架/vue3_test/18.src_provide与inject/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <div className="app">
+    <h3>我是app组件（祖）{{ name }}-{{ price }}</h3>
+    <child/>
+  </div>
+</template>
+
+<script>
+import child from "@/components/Child.vue";
+import {reactive, toRefs, provide} from "vue";
+
+export default {
+  name: 'App',
+  components: {child},
+  setup() {
+    let car = reactive({
+      name: '奔驰',
+      price: '40W'
+    })
+    provide('car', car)  //给自己的后代组件传递数据
+    return {...toRefs(car)}
+  }
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 10px;
+}
+</style>

20_脚手架/vue3_test/18.src_provide与inject/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/18.src_provide与inject/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>

20_脚手架/vue3_test/18.src_provide与inject/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')