provide

我们要知道provide 和 inject就像是神雕侠侣一样，是要一起配合使用的。通常，当我们需要从父组件向子组件传递数据时，我们使用 props。但是如果是这种情况：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容，我们该怎么办呢？你可能会想到我们可以用vuex或者仍然将 prop 沿着组件链逐级传递下去，但是这样是比较麻烦或者是不必要的，那我们就可以用 provide 和 inject。

简单使用

无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

假定三个自定义组件，如下：

//父组件
app.component('my-component', {
    provide: {
        user: 'SLifree'
    },
    template: `<h1> Hello,world! <slot/></h1>`
})
//子组件
app.component('my-component-item', {
    template: `<span> My name is <slot/> !</span>`
})
//子子组件
app.component('my-component-item-name', {
    inject: ['user'],
    template: `<span>{{user}}</span>`
})

使用如下：

<my-component>
    <my-component-item>
        <my-component-item-name></my-component-item-name>
    </my-component-item>
</my-component>

此时的渲染结果是：Hello,world! My name is SLifree !，也就是my-component-item-name可以直接用到my-component的数据。组件中user的是固定的，那么如果让它是根据组件实例property来渲染数据，又是如何使用呢？此时的provide要转化为返回对象的函数，如下：

app.component('my-component', {
    props: ['name'],
    provide() {
        return { user: this.name }
    },
    template: `<h1> Hello,world! <slot/></h1>`
})

使用如下：

<my-component :name="???">
    内容同上
</my-component>

此时渲染结果的user值就是my-component组件的name值，但这个结果不会随着name的改变而改变，它仅仅渲染的是第一次的值。如果我们需要动态响应，需要用以下的方法。

动态响应

上述例子中，如果渲染结果随着name的改变而改变，我们需要为 provide 的 user 分配一个组合式 API computed property，此时my-component-item-name和my-component组件会发生变化，如下：

app.component('my-component', {
    props: ['name'],
    provide() {
        return { 
            //computed 是 Vue 的方法，让这个数据变成响应式的
            user: computed(() => this.name)
        }
    },
    template: `<h1> Hello,world! <slot/></h1>`
})

app.component('my-component-item-name', {
    inject: ['user'],
    //这里 user 的使用发生了变化 要用：user.value
    template: `<span>{{user.value}}</span>`
})

使用如下：

<my-component :name="???">
    <my-component-item>
        <my-component-item-name></my-component-item-name>
    </my-component-item>
</my-component>

此时的渲染结果，会随便???的变化而变化。

use

安装 Vue.js 插件。如果插件是一个对象，它必须暴露一个 install 方法。如果它本身是一个函数，它将被视为安装方法。在这篇文章中，我们先不赘述插件的写法，仅仅了解一下use的使用。

假定一个插件MyPlugin，使用如下：

app.use(MyPlugin)

我们利用这个方法，可以把自己封装的插件，或者针对项目所写的插件给安装一下，以方便我们接下来的使用。

version

顾名思义，这是方法是用来检测Vue版本的，以字符串形式提供已安装的 Vue 的版本号。我们获取版本号可以做对应的操作，例如做不同版本的需求不一样、插件的时候考虑的不一样等等。其实，就是来做兼容处理，以插件为例如下：

export default {
  install(app) {
    const version = Number(app.version.split('.')[0])
    if (version < 3) {
      console.warn('This plugin requires Vue 3')
    }
    // ...
  }
}

我们可以根据版本号来左对应的处理。

总结

provide 和 inject要配合使用，provide 是提供数据， inject是使用数据。
对于provide主要介绍了组件通信的使用，但是我们也可以定义一个全局的属性：app.provide('user', 'administrator')，这样我们可以在任意组件都用到这个数据。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之API篇（四）

provide

简单使用

动态响应

use

version

总结