2020/3/22
vue兄弟组件之间传值之Bus
可以用过一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发 $emit 和监听 $on 来实现组件之间的通信和参数传递,类似window的全局自定义事件。类似与子传父,只不过是利用一个新的vue示例作为媒介,而不是当前vue示例(this)
// bus.js
import Vue from 'vue';
export default new Vue;
// 组件a.js
<template>
<div class='a'></div>
</template>
<script>
import Bus from 'bus.js' ;
export default {
name: "a",
created() {
// 在需要的传递数据的时候调用sendData方法,这里模拟调用
this.sendData();
},
methods: {
sendData () {
Bus.$emit('listenToA', 'hello');
}
}
}
</script>
// 组件b.js
<template>
<div class='b'></div>
</template>
<script>
import Bus from 'bus.js';
export default {
name: "b",
monted() {
Bus.$on('listenToA', this.getAData);
},
methods: {
getAData (val) {
console.log(`a组件传递过来的数据: ${val}`); // hello
}
}
}
</script>