vue 兄弟组件通讯。监听和销毁

最新推荐文章于 2023-11-11 08:39:18 发布

原创最新推荐文章于 2023-11-11 08:39:18 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中使用EventBus实现组件间的通信。通过创建一个全局的Vue实例作为消息中心，组件1可以发送事件和数据，而组件2则监听并响应这些事件，实现内容的动态更新。这种通信方式适用于兄弟组件或其他非父子组件之间的数据传递，是一种常见的Vue开发技巧。

背景
主页面需要加载两个不同的组件，并且在点击 A 组件的时候，B组件中的内容会对应的改变。

使用
component1 点击触发事件，再component2 中监听并进行后续操作。
首先，在main.js中添加

Vue.prototype.msgCenter = new Vue()

主页面 component1 和 component2 是兄弟关系

<template>
    <div>
        <component1 />
        <component2 />
    </div>
</template>

component1 中发送：

<template>
    <div @click="sendMsg">
    </div>
</template>
<script>
export default {
    name: "",
    data: function () {
        return {};
    },
    computed: {},
    methods:{
		sendMsg() {            
            this.msgCenter.$emit("componentSend",{msg:"value", msg2: "value2"})
            // 通过再main.js 里面添加的 msgCenter 发送
            // emit 的第一个参数是 事件名称，第二个参数是 需要发送的数据
        },
	}
};

</script>

component2

<script>
export default {
    name: "",
    data: function () {
        return {};
    },
    computed: {},
    methods: {
   		//监听到事件后触发
   		// 默认参数 val 就是在component1 emit 过来的数据
        receiveMsg(val) {
            console.log(val)
            // 打印数据 {msg:"value", msg2: "value2"}            
        }
    },
    created() {
    	//在created 中 on 监听 
    	// on 的第一个参数是事件名称，第二个参数是 监听到事件后对应触发的方法
        this.msgCenter.$on("componentSend", this.receiveMsg);
    },
    beforeDestroy() {
    	// 销毁，否则可能会导致多次触发 on
        this.msgCenter.$off("componentSend");
    },
};
</script>