Vue 多级组件透传新方法:provide/inject

provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容)。

Vue 官方警告:

provideinject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

当然,警告只是警告,你完全可以正常使用。

使用方法非常像 dataprops 的组合大礼包:

var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

唯一的区别是你不用再一层层的传入了,过去用的 event-bus 虽然可以解决深层问题,但是会导致整个 event-emit 组成过于混乱,难以维护。使用 provide / inject 可以保证父子单向数据流的清晰性。

在 React 中 Context 的 Provider / Consumer 也有相同的效果,由于还没有具体使用过,对 React 本身也只有一面之缘,留待以后在了解,感兴趣的同学可以阅读文档了解。

参考文章:

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, 语法, Vue

添加新评论