vue中的provide和inject

目录

一、语法

二、使用场景

三、关于 provide/inject 的响应问题

---

每次看到关于vue组件传值的文章，都会讲到provide和inject这种传值方法。但是在实际的项目开发中，基本没有看到过使用这个的场景（印象中之前看iview form组件代码的时候看到过），所以这应该用于什么场景当中呢？

一、语法

用法详见vue document - provide/inject，在此不多作赘述。

二、使用场景

关于使用场景，官方文档中是这么表述的：

在 iview Form 组件中的使用：

三、关于 provide/inject 的响应问题

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

（以上来自官方文档）

首先，这个绑定关系是不可响应的，也就是说，更新provide的值并不会对其后代组件中的inject值造成影响。

看一个例子：

点击改变父组件中的 name 值，子组件中的数据并没有改变。

// fathers.vue
export default {
  // ...
  data() {
      return {
        name: 'Spencer'
      }
  },
  provide(){
      return {
          users: this.name
      }
  },
  methods: {
      handleChange(){
         this.name = 'new Name'
      }
  }
};

// son.vue
export default {
    // ...
    inject: {
        users: {
            default: ''
        }
    }
};

那什么时候是可响应的呢？

一、当传入一个对象的时候（或者也可以直接传入当前this对象）

// father.vue
export default {
  // ...
  data() {
      return {
          userinfo: {
              name: 'Spencer'
          },
      }
  },
  provide(){
      return {
          users: this.userinfo
      }
  }
};

// son.vue
export default {
    inject: {
        users: {
            default: ()=>{}
        },
    }
};

PS: 感觉这样子之所以可以响应应该是对象的存储问题，所以还是指向同一个地址，不知道这样子理解对不对，先写到这里，有待进一步研究。