vue 使用 provide,inject。2.2.0 新增
provide / inject 介绍
1. provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
2. 这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
provide 用法
1.选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性
// 传入对象写法
provide: {
foo: 'bar'
}
// 函数写法
provide () {
return {
s: 'foo'
}
}
inject 用法
一个字符串数组,或
一个对象,对象的 key 是本地的绑定名
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
实现 provide / inject 可监听
// App.vue 组件 (父组件)
export default {
name: 'electron-xdf',
data () {
return {
asideW: '200px',
_path: null
};
},
created () {
this._path = this.$route.path;
},
provide() {
return {
INFO: this // 传递可响应对象
};
},
methods:{
upprovide(){
this.asideW = '500px'; // 修改 属性值得变化,可以传递到 子孙后代的任意组件 同时响应变化
}
}
}
// 子组件
export default {
props: {},
computed: {},
name: 'process-communication',
data () {
return {
count: 0
};
},
inject: ['INFO'],
methods: {
upprovide(){
// 这里修改之后 App.vue 也会响应数据的变化
this.INFO.asideW = '200px';
}
}
};
provide 和 inject 参考地址:https://cn.vuejs.org/v2/api/#provide-inject