Vue message subscription and publishing

Message subscription and publishing can also realize communication between any components.

Subscriber: It is equivalent to us, used to receive data.

Publisher: It is equivalent to the media, used to transmit data.

Install the message subscription and publishing plug-in:

It is not easy to implement message subscription and publishing in native JS, so we recommend using the pubsub-js library with the help of third-party libraries here, which can be used in any framework.

install command

npm i pubsub - js

After the installation is complete, it can be introduced in the components that need to be used

Message subscription and publishing process:

First create the Content.vue component for displaying content. And introduce the pubsub-js plug-in to subscribe to the message to receive data through the pubsub.subscribe method.

<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>

Then create the Edit.vue component for editing content and introduce the pubsub-js plug-in to publish messages and transfer data through the pubsub.publish method.

<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>

Finally, create the Home.vue page and reference the Content.vue and Edit.vue components.

<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>

Note : In the subscription message, two parameters will be received, the first is the message name and the second is the received data. In addition, the callback function of the subscription message must be an arrow function, otherwise this will become undefined.

Note : When you want to destroy the subscribed message, you need to create a variable to receive the message first, and then destroy it through this variable, similar to clearing the timer.

<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>

Remarks: In Vue, it is still recommended to use the global event bus to realize communication between components. Message subscription and publishing are not widely used in Vue.

Original author: Wu Xiaotang

Creation time: 2023.4.21

Vue message subscription and publishing

Guess you like