VUE框架CLI组件化消息订阅和发布机制实现数据交换传递------VUE框架

旧约Alatus

已于 2023-12-17 17:31:33 修改

阅读量345

点赞数 11

分类专栏： # VUE框架前端文章标签：前端 vue javascript vue.js 前端框架 js ecmascript

于 2023-12-12 09:58:25 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134941852

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<template>
	<div>
		<A></A>
		<B></B>
	</div>
</template>

<script>
import A from "./components/A.vue";
import B from "./components/B.vue";
export default {
	name : "App",
	components : {A,B}
}
</script>

<style>

</style>
<template>

<div>

<A></A>

<B></B>

</div>

</template>

<script>

import A from "./components/A.vue";

import B from "./components/B.vue";

export default {

name : "App",

components : {A,B}

}

</script>

<style>

</style>

<template>
    <div>
        <h1>A</h1>
        <button @click="EndDestroy()">销毁</button>
    </div>
</template>

<script>
// 优先还是使用全局事件总线
import pubsub from "pubsub-js";
export default {
    name : "A",
    mounted(){
        // A组件挂载完毕之后订阅消息
        // this.pid = pubsub.subscribe("2023年第五期英语周报",function(messageName,message){
            // 左边参数是名字,右边参数是具体的消息
            // console.log(messageName + ":" + message);
        // });
        this.pid = pubsub.subscribe("2023年第五期英语周报",(messageName,message) => {
            // 这里最好用箭头函数,这样可以保证这个方法内的this是当前vc对象
            console.log(messageName + ":" + message);
        });
    },
    // 当前实例销毁之前需要取消订阅状态
    beforeDestroy(){
        pubsub.unsubscribe(this.pid);
    },
    methods : {
        EndDestroy(){
            this.$destroy();
        }
    }
}
</script>

<style>

</style>
<template>

<div>

<h1>A</h1>

<button @click="EndDestroy()">销毁</button>

</div>

</template>

<script>

// 优先还是使用全局事件总线

import pubsub from "pubsub-js";

export default {

name : "A",

mounted(){

// A组件挂载完毕之后订阅消息

// this.pid = pubsub.subscribe("2023年第五期英语周报",function(messageName,message){

// 左边参数是名字,右边参数是具体的消息

// console.log(messageName + ":" + message);

// });

this.pid = pubsub.subscribe("2023年第五期英语周报",(messageName,message) => {

// 这里最好用箭头函数,这样可以保证这个方法内的this是当前vc对象

console.log(messageName + ":" + message);

});

},

// 当前实例销毁之前需要取消订阅状态

beforeDestroy(){

pubsub.unsubscribe(this.pid);

},

methods : {

EndDestroy(){

this.$destroy();

}

}

}

</script>

<style>

</style>

<template>
    <div>
        <h1>B</h1>
        <button @click="publishEn()">发布消息</button>
    </div>
</template>

<script>
import pubsub from 'pubsub-js';
export default {
    name : "B",
    methods : {
        publishEn(){
            // 发布消息
            pubsub.publish("2023年第五期英语周报","安倍晋三遇刺案");
        }
    }
}
</script>

<style>

</style>
<template>

<div>

<h1>B</h1>

<button @click="publishEn()">发布消息</button>

</div>

</template>

<script>

import pubsub from 'pubsub-js';

export default {

name : "B",

methods : {

publishEn(){

// 发布消息

pubsub.publish("2023年第五期英语周报","安倍晋三遇刺案");

}

}

}

</script>

<style>

</style>