Vue 消息订阅与发布

消息订阅与发布，也可以实现任意组件之间的通信。

订阅者：就相当于是我们，用于接收数据。

发布者：就相当于是媒体，用于传递数据。

 安装消息订阅与发布插件：

在原生 JS 中 不太容易实现消息订阅与发布，所以我们这里借助第三方库实现 推荐使用 pubsub-js 库 它可以在任意一个框架中使用。

安装命令

npm i pubsub - js

安装完成后在需要使用的组件中引入即可

 消息订阅与发布使用流程：

首先创建 Content.vue 组件用于显示内容。并引入 pubsub-js 插件 通过 pubsub.subscribe 方法订阅消息 接收数据.

<template>
    <div>
        <h2>{{ name }}</h2>
    </div>
</template>

<script>
import pubsub from "pubsub-js"
export default {
    name: "Content",
    data() {
        return {
            name: "张三"
        }
    },
    mounted() {
	    // 订阅消息 getName
	    pubsub.subscribe("getName", (msg, name) => {
            console.log(msg, name);
            this.name = name;
        })
        // this.$bus.$on("getName", (name) => {
        //     this.name = name;
        // })
    }
}
</script>

然后创建 Edit.vue 组件用于编辑内容 并引入 pubsub-js 插件 通过 pubsub.publish 方法发布消息，传递数据。

<template>
    <div>
        <h2>编辑姓名</h2>
        <input type="text" v-model="name">
        <button @click="editName">修改</button>
    </div>
</template>

<script>
import pubsub from "pubsub-js"
export default {
    name: "Edit",
    data() {
        return {
            name: ''
        }
    },
    methods: {
        editName() {
            // 发布消息
            pubsub.publish("getName", this.name);
            // this.$bus.$emit("getName", this.name);
        }
    }
}
</script>

最后创建 Home.vue 页面，并引用 Content.vue 和 Edit.vue 组件。

<template>
    <div>
        <Content></Content>
        <hr />
        <Edit></Edit>
    </div>
</template>

<script>
import Content from "../components/Content"
import Edit from "../components/Edit"
export default {
    name: "Home",
    components: { Content, Edit }
}
</script>

注：在订阅消息中，会接收到两个参数，第一个是消息名称 第二个才是接收的数据 另外订阅消息的回调函数必须是箭头函数 否则 this 会变成 undefined.

 

注：订阅的消息想要销毁时，需要先创建一个变量接收这个消息，然后通过这个变量销毁，类似于清除定时器。

<template>
    <div>
        <h2>{{ name }}</h2>
    </div>
</template>

<script>
import pubsub from "pubsub-js"
export default {
    name: "Content",
    data() {
        return {
            name: "张三"
        }
    },
    mounted() {
        // 订阅消息 getName
        this.pubId = pubsub.subscribe("getName", (msg, name) => {
            console.log(msg, name);
            this.name = name;
        })
        // this.$bus.$on("getName", (name) => {
        //     this.name = name;
        // })
    },
    beforeDestroy() {
        // 取消订阅 getName
        pubsub.unsubscribe(this.pubId);
        // this.$bus.off("getName");
    }
}
</script>

备注：在 Vue 中还是推荐使用全局事件总线实现组件之间的通信，消息订阅与发布在 Vue 中的使用并不多。

原创作者： 吴小糖

创作时间：2023.4.21