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