vue组件通信provide/inject

组件通信

provide/inject

• 一对使用
• 父组件通过provide提供数据
• 子组件通过inject注入值
• 非响应式，可通过对象内属性的方式进行修改
• 解决深层次组件通信

举例：

在app组件下引入son1组件，son1组件引入son2，son2引入son3.这时候我们一般会通过props逐层传递，也可以直接通过provide/inject，直接从app把数据传给传给son3。

代码如下：

App.vue

son1.vue

son2.vue

son3.vue

效果图：

 但是这种方式传值有个问题，就是从App传递的数据是非响应式的。当我们改变App.vue里面的text这个变量的时候，传递给son3的数据并不会发生变化。

 遇到这中问题，可以通过把传递的值变成一个对象的形式进行传递。

App.vue

son3.vue

效果图：

如果在son2中使用了 provide，变量名一直，则会覆盖。

如图：

总结：

• provide/inject成对使用，是为了解决深层次组件通信的，如果需要响应式，可以通过对象内属性的方式。
• 子组件同名的情况，更近的覆盖。
• 可作为多个较大的父组件，来向下传播唯一值。

父组件：
provide(){
    return {
      text:this.text,
      obj:this.obj
    }
},



子组件：
inject: ['text', 'obj']