深度嵌套组件，数据不需要层层传递

前面我们连续介绍了Vue相关的概念，如果你能坚持到这里基本上入门 Vue 了，回顾一下前面的内容：

新开了一个坑

查看 Vue3 模板编译后的 AST 和渲染函数

Vue3 Contributor 说渲染器的设计思想

接下来的内将系统学习一下 Vue 支持的所有特性，逐步加入一些编程思想及原理。

provide - 组件嵌套之间传值

在实际业务开发中，经常遇到嵌套组件之间传值的问题，最可怕的是把根组件的数据传递到最底层的组件，难道需要层层传递吗？我来举个例子：

组件层级如下：

├── Root
    ├── SuYan
        └── Lefex

如果想把 Root 组件的数据传递到 Lefex，我们通常的做法是先把属性传给 Suyan，然后再传给组件 Lefex。哪有没有办法直接把 Root 中的属性传递给 Lefex 呢？不经过 Suyan 这个组件。

为解决这个问题，provide 特性就出现了，它必须配合 inject 使用。provide 是数据提供方（生产者），inject 是数据接收者（消费者）。我们直接看例子：

1、定义组件 Lefex

在这个组件中，通过 inject 来获取根组件 Root 提供的属性 title 和 ageShow，可直接拿来使用，如同组件内部定义的属性一样。

const lefexTpl = `
    <h1>{{ title }}</h1>
    <p>{{ ageShow.value }}</p>`;

const Lefex = {
    template: lefexTpl,
    inject: ['title', 'ageShow']
}

2、定义组件 SuYan

该组件使用了组件 Lefex。

const SuYan = {
    template: '<Lefex></Lefex>',
    components: {
        Lefex
    }
}

3、定义根组件

在该组件中，通过 provide 函数提供了两个属性：

title：这个属性变化时，使用方 Lefex 并不能响应；
ageShow：这个属性变化时，使用方 Lefex 能够及时响应。在 mounted 函数中，1秒后修改属性 age 的值，组件 Lefex 也会及时更新；

const Root = {
    template: '<SuYan></SuYan>',
    components: {
        SuYan
    },
    data() {
        return {
            age: 20
        }
    },
    provide() {
        return {
            title: '和素燕一起学习 Vue 的编程思想',
            // 可支持响应式
            ageShow: Vue.computed(() => `他今年${this.age}岁了！`)
        }
    },
    mounted() {
        setTimeout(() => {
            this.age = 26;
        }, 1000);
    }
};

4、创建一个 app

const app = Vue.createApp(Root);
app.mount('#suyan-app');

总之，通过 provide 和 inject 可以实现跨组件数据传递。那这个特性在 Vue 是如何实现的呢？

参考

官方 Provide / inject

本节内容同步在网站 https://lefex.gitee.io/ 上，我会把大家的问题汇总到网站上。大家加油！！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/

深度嵌套组件，数据不需要层层传递

provide - 组件嵌套之间传值

参考

浏览过的版块