Vue中的组件通信
父子组件通信
- 父组件订阅
$emit('func', xxx)
,子组件绑定@func="xxxFunc()"
触发。(观察者模式) - 引用refs,通过
this.refs.comp.xxx
,引用子组件的数据 - 子元素children,
this.children[0].xx = 'xxx'
,获取或者set子组件数据。这里的children[0]不可修改。
兄弟组件通信
- 通过共同祖辈通信 (需要父组件或者根组件是同一个)
this.$parent.$on('foo', (aaa) => { // 接收传参aaa }) // A 组件 监听 this.$parent.$emit('foo', aaa) // B 组件 订阅
祖先和后代传参
由于嵌套层数过多,props用起来很麻烦。vue提供了
provide/inject
传参,可以实现祖先给后代传值。反过来,后代传递给子就不太行了。
// 父
provide(){
return {
foo: 'foo',
foo: this.foo // 这里的可以是data中的动态值。
setFoo: (xxx) => {
this.foo = xxx // 如果要改动inject的值。
}
},
}
// 子
inject: ['foo']
事件总线 $bus
- 新建一个js文件,来创建出我们的eventBus,我们把它命名为bus.js
内容如下:
import Vue from 'vue';
export default new Vue();
- 在孙子组件和爷爷组件中,都需要引入这个bus.js
import Bus from 'common/js/bus.js';
// 孙子组件
```js
addCart(event) {
//如果传递参数的话,可以如下这样写
Bus.$emit('getTarget', event.target);
//如果不传递参数可以如下;
Bus.$emit('getTarget');
}
// 爷爷组件
created() {
//如果传递参数的话,爷爷组件需要这样接收
Bus.$on('getTarget', target => {
console.log(target);
});
//如果不传递参数的话,则可以如下处理
Bus.$on('getTarget',()=>{
//此处执行对应的函数操作
})
}
Vuex状态管理工具通信
通过绑定一写getter dispatch murtation state 通信。
这类比较麻烦,个人不是很喜欢。一般的场景还是用以上四点即可。
插槽
// 父组件
<childComp>
<div>xxx</div>
</childComp><