Vue组件跨层级通信详解

2022年6月2日08:55:37

正常组件间通信
  父->子组件 是通过属性传递
  子->父组件 是通过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
};
},

转载于:https://www.cnblogs.com/LChenglong/p/11468899.html

  • 作者:anda9128
  • 原文链接:https://blog.csdn.net/anda9128/article/details/101795914
    更新时间:2022年6月2日08:55:37 ,共 983 字。