vue3 利用 Composition provide 实现祖先组件向后代组件传值

vue2中可以通过 props实现父子组件间传值
而vue3的provide则是进一步强化了这个功能
我们先创建一个vue3项目

然后在src下的components下再创建一个 components文件夹 里面创建一个index.vue文件

然后找到src下的App.vue 编写代码如下

<template>
  <div class="containers">
    <el-button @click = "setTitle">触发</el-button>
    <hello-world :title = "title"></hello-world>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";
import { ref,provide } from "vue";
export default {
  components: {
    HelloWorld
  },
  setup(){
    let title = ref("App数据标题");
    let setTitle = () => {
      title.value = "组件示范";
    }
    provide("title",title);
    return {
      title,
      setTitle
    }
  }
}
</script>

<style lang="scss">
</style>

这里我们引入了src下的 components 下的HelloWorld
然后通过ref声明了一个响应式变量title
然后定义类一个方法 setTitle 动态改变title的值 最后 将这个方法和变量返回给组件

然后找到 src下的 components 下的HelloWorld组件
编写代码如下

<template>
    <teleport to = "#app">
        <index></index>
    </teleport>
</template>

<script>
import index from "./components/index";
export default {
    components: {
        index
    },
}
</script>
<style scoped>
</style>

因为HelloWorld本身就在components下 所有 ./就是在拿和自己平级的目录 所以 这里的 ./components/index
就是在拿我们一开始写的 src下的 components下的 components 下的 index.vue

那么 我们在 src下的 components下的 components 下的 index.vue 编写代码如下

<template>
    <div>{{ title }}</div>
</template>

<script>
import { inject } from "vue";
export default {
    setup(){
        let title = inject("title");
        return {
            title
        }
   }
}
</script>
<style scoped>
</style>

我们这里用的inject就是在获取之前 App.vue中定义在provide中的变量

可以看到 我们 index组件中的title被成功输出 而这边变量是App.vue传递的 我们再点一下触发 触发一下App.vue的setTitle改变一下这个title 看看这个index组件的数据会不会动态改变

也是成功的改变了

我们可以明显看到
他们的父子关系是 App.vue HelloWorld.vue index.vue
所以说 provide是传给了自己所有的后代元素 不在受层级的限制 比 原来的父子传值要强大许多