Vue依赖注入 provide 和 inject
允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效provide 选项允许我们指定我们想要提供给后代组件的数据/方法provide 选项应该是一个对象或返回一个对象的函数 provide: function () {return {getMap: this.getMap}}// 或者provide...
·
允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效
provide
选项允许我们指定我们想要提供给后代组件的数据/方法
provide
选项应该是一个对象或返回一个对象的函数
provide: function () {
return {
getMap: this.getMap
}
}
// 或者
provide: {
foo: 'bar'
}
然后在任何后代组件里,我们都可以使用 inject
选项来接收指定的我们想要添加在这个实例上的属性:
inject
选项应该是:
- 一个字符串数组,或
- 一个对象,对象的 key 是本地的绑定名,value 是:
- 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
- 一个对象,该对象的:
from
属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)default
属性是降级情况下使用的 value
inject: ['getMap']
Vue-cli 3.0 + Typescript 环境下
父组件 provide
@Provide()
public componentActivity = this.getProvide()
private getProvide() {
return 'aaaaaa'
}
// 或者
@Provide()
public componentActivity = {name:'aaaaaa'}
后代组件 Inject
@Inject()
private componentActivity: string
private created() {
console.info(this.componentActivity) // 'aaaaaa'
}
然而,依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难。同时所提供的属性是非响应式的,父组件传值发生变化时,子组件接收的数据是不会对应改变的,如果需要响应传值可以考虑vuex
更多推荐
已为社区贡献5条内容
所有评论(0)