Vue组件跨层级通信

正常组件间通信
　　父->子组件是通过属性传递
　　子->父组件是通过this.$emit()传递
　　this.$emit()返回的是this,如果需要一些值可使用callback方式传递

provide 和 inject

　　这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，
　　不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
　　provide 和 inject 绑定并不是可响应的。这是刻意为之的。
　　然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

　　provide提供数据,多层子组件向上层寻找,只要找到就不在向上层寻找了.
　　inject 向子组件注入数据

使用方式

第一种方式(传递对象,使用字符串数组接收)

// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}

// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}

第二种方式(传递返回对象的函数, 使用对象接收)

provide() {
return {
// 2.6.0 版本之前 通常传递this. 但这样的话 会传递很多用不到的属性
theme: {
color: 'xxx' //如果传入可响应的数据,这里的属性还是可响应的
}
};
}
inject: {
//这里可以换成其它名字
theme: {
from: "theme", // 数据来源
default: () => ({}) //降级情况下使用的 value
//可以是 普通值
//可以是 对非原始值使用一个工厂方法
}
}
//正常子组件
this.theme //即可访问
//子组件是函数式组件的使用方式
injections.theme.color

Vue.observable( object )
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
可以作为最小化的跨组件状态存储器，用于简单的场景

提供数据可改为

provide() {
//这时提供的theme 则为可响应的数据
this.theme = Vue.observable({
color: "blue"
});
return {
theme: this.theme
};
},

Vue组件跨层级通信

猜你喜欢