1.在main.js中全局挂载bus
Vue.prototype.bus = new Vue();
2.在需要传递数据的组件中使用bus触发自定义事件
`this.bus.$emit('自定义事件名',要传递的值)`
例如:
<template>
<div class="ebox">
<h5>E组件</h5>
<button @click="EChange">E要孝敬大家了</button>
</div>
</template>
<script>
export default {
props: {},
data() {
return {
egift: "E孝敬的茅台",
};
},
methods: {
EChange() {
this.bus.$emit("ESend", this.egift);
},
},
components: {},
};
</script>
3.需要接收的组件接收,使用this.bus.$on('自定义事件名',()=>{v})
在需要结收的组件的mounted钩子函数中,使用bus监听通bus的自定义事件
<template>
<div class="abox">
<h1>A组件,最外层的</h1>
<B></B>
</div>
</template>
<script>
import B from "../components/B";
export default {
props: {},
data() {
return {};
},
methods: {},
components: {
B,
},
mounted() {
this.bus.$on("ESend", (v) => {
console.log("a接收E孝敬的:", v);
});
},
};
</script>