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.publish メソッドを通じてメッセージをパブリッシュし、データを転送するための pubsub-js プラグインを導入します。

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

注意: サブスクリプションメッセージでは、2 つのパラメータが受信されます。1 つ目はメッセージ名、2 つ目は受信データです。また、サブスクリプションメッセージのコールバック関数はアロー関数である必要があり、それ以外の場合は未定義になります。

注: サブスクライブしたメッセージを破棄する場合は、タイマーをクリアするのと同様に、最初にメッセージを受信する変数を作成し、次にこの変数を通じてメッセージを破棄する必要があります。

<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

Vue メッセージのサブスクリプションと公開

おすすめ