Vue的全局事件总线
Vue.js的全局事件总线是一种常见的通信模式,它允许不同组件之间进行通信和数据传递,而无需直接引用彼此。全局事件总线的核心思想是创建一个中央事件总线对象,允许组件在其中发出事件并监听事件。
下面是如何在Vue.js中创建全局事件总线的步骤:
创建一个事件总线对象:在你的Vue.js应用中,通常在根实例(main.js或根组件)中创建一个事件总线对象。你可以使用Vue实例作为事件总线对象,或者创建一个独立的Vue实例来作为事件总线。例如:
js
// main.js或根组件
import Vue from 'vue';
// 创建一个事件总线对象
export const eventBus = new Vue();
在组件中使用事件总线:在需要通信的组件中,可以导入事件总线对象并使用它来发出事件和监听事件。
js
// 在组件中导入事件总线
import { eventBus } from './main'; // 根据你的项目结构导入路径可能不同
export default {
methods: {
sendMessage(message) {
// 发出一个自定义事件
eventBus.$emit('message-sent', message);
}
},
created() {
// 监听自定义事件
eventBus.$on('message-sent', (message) => {
console.log('Received message:', message);
// 执行相应操作
});
}
}
这样,当一个组件调用sendMessage方法时,它会向事件总线发出一个名为message-sent的事件,其他组件可以通过监听这个事件来执行相应的操作。
全局事件总线是一种简单而有效的方式,允许不同组件之间进行通信,但要小心不要滥用它,以避免组件之间的耦合过度。在大型应用中,你可能会考虑使用Vuex来管理应用的状态和数据流,而不是完全依赖全局事件总线。
具体案例:
main.js
js
//引入Vue组件
import Vue from 'vue';
//引入App组件
import App from './App.vue';
//关闭Vue生产提示信息
Vue.config.productionTip=false;
//创建Vue实例对象nm
const vm = new Vue({
el:'#app',
render(h) {
return h(App);
},
beforeCreate(){//生命周期钩子函数
Vue.prototype.$bus=this;//安装全局事件总线
}
});
App.vue
html
<template>
<div class="demo1">
<School></School>
<Student></Student>
</div>
</template>
<script>
import School from './components/School.vue';
import Student from './components/Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
<style scoped>
.demo1{
background-color: grey;
}
</style>
School.vue
html
<template>
<div class="demo2">
<h2>学校名字:{{name}}</h2>
<h2>学校地址:{{adress}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'工学院',
adress:'湖南'
}
},
methods:{
demo(e){
console.log("我是组件School,收到数据",e);
}
},
mounted() {//生命周期钩子函数
//console.log("School:",this);
//给vc定义一个组件
this.$bus.$on('hello',this.demo);//回调事件
},
//解绑事件
beforeDestroy(){
this.$bus.off('hello');
}
}
</script>
<style scoped>
.demo2{
background-color: orange;
}
</style>
student.vue
html
<template>
<div class="demo3">
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'罗小黑',
age:23
}
},
mounted() {//生命周期钩子函数
//console.log("Student:"+this.x);
},
methods:{
sendStudentName(){
this.$bus.$emit('hello',this.name)//暴露自定义事件
}
}
}
</script>
<style scoped>
.demo3{
background-color: skyblue;
}
</style>
vue消息订阅与发布
vue-bus消息订阅与发布
Vue.js中的消息订阅与发布通常是通过一个第三方库或插件来实现的,最常见的库之一是vue-bus。这种模式允许不同组件之间进行解耦的通信,类似于全局事件总线,但提供了更多的功能和控制。
以下是使用vue-bus库来实现消息订阅与发布的基本步骤:
安装vue-bus库:
在你的Vue.js项目中,首先需要安装vue-bus库。你可以使用npm或yarn进行安装:
bash
npm install vue-bus --save
或者
bash
yarn add vue-bus
在Vue应用中使用vue-bus:
在你的Vue应用中,通常在main.js文件中配置并使用vue-bus。
js
import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);
new Vue({
// ...
}).$mount('#app');
发布消息:
任何组件都可以通过this. b u s . bus. bus.emit方法发布消息。例如:
js
this.$bus.$emit('message-sent', messageData);
这将在组件创建时订阅message-sent消息,并在接收到消息时执行回调函数。
在适当的生命周期钩子中取消订阅:
为了防止内存泄漏,确保在组件销毁时取消订阅消息。你可以在组件的beforeDestroy钩子中取消订阅:
js
this.$bus.$on('message-sent', (data) => {
console.log('Received message:', data);
// 执行相应操作
});
这将在组件创建时订阅message-sent消息,并在接收到消息时执行回调函数。
在适当的生命周期钩子中取消订阅:
为了防止内存泄漏,确保在组件销毁时取消订阅消息。你可以在组件的beforeDestroy钩子中取消订阅:
js
beforeDestroy() {
this.$bus.$off('message-sent');
}
这样,你就可以在Vue.js应用中使用消息订阅与发布模式,实现组件之间的松耦合通信。vue-bus库提供了一种方便的方式来管理消息传递,但请注意在使用时小心不要滥用,以避免导致代码难以维护。
使用pubsub-js完成Vue的消息订阅与发布
pubsub-js是一个独立的 JavaScript 库,用于实现消息发布和订阅模式,它不是 Vue.js 的一部分。你可以在 Vue.js 项目中使用它来实现组件之间的消息订阅和发布。以下是在 Vue.js 中使用 pubsub-js 实现消息订阅和发布的步骤:
安装 pubsub-js 库:
首先,你需要安装 pubsub-js 库,你可以使用 npm 或 yarn 安装它:
js
npm install pubsub-js --save
或者
js
yarn add pubsub-js
创建消息发布和订阅的组件:
在你的 Vue.js 项目中创建需要发布和订阅消息的组件。例如,你可以创建一个名为 PublisherComponent 的组件和一个名为 SubscriberComponent 的组件。
在 PublisherComponent 中发布消息:
在 PublisherComponent 组件中,使用 pubsub-js 的 publish 方法发布消息。例如:
js
import PubSub from 'pubsub-js';
export default {
methods: {
publishMessage(messageData) {
PubSub.publish('message-sent', messageData);
}
}
}
这将发布一个名为 message-sent 的消息,并传递 messageData 作为数据。
在 SubscriberComponent 中订阅消息:
在 SubscriberComponent 组件中,使用 pubsub-js 的 subscribe 方法订阅消息。例如:
js
import PubSub from 'pubsub-js';
export default {
created() {
this.messageSubscription = PubSub.subscribe('message-sent', (msg, data) => {
console.log('Received message:', data);
// 执行相应操作
});
},
beforeDestroy() {
PubSub.unsubscribe(this.messageSubscription);
}
}
在 created 钩子中,我们订阅了名为 message-sent 的消息,并指定了一个回调函数来处理接收到的消息。在 beforeDestroy 钩子中,我们取消了订阅以避免内存泄漏。
现在,PublisherComponent 可以发布消息,而 SubscriberComponent 可以订阅并接收这些消息,从而实现了组件之间的消息传递。
请注意,pubsub-js 是一个轻量级的库,适用于在 Vue.js 项目中实现消息订阅和发布,但要小心不要滥用它,以避免导致不易维护的代码。如果你的应用需要更复杂的状态管理或数据传递,考虑使用 Vuex 或其他状态管理工具。
demo:
school.vue
html
<template>
<div class="demo2">
<h2>学校名字:{{name}}</h2>
<h2>学校地址:{{adress}}</h2>
</div>
</template>
<script>
//引入消息订阅与发布组件
import pubsub from 'pubsub-js';
export default {
name:'School',
data() {
return {
name:'工学院',
adress:'湖南'
}
},
methods:{
demo(msgName,data){
console.log("有人发布了hello消息,hello消息回调执行了===>",msgName,data);
}
},
mounted() {//生命周期钩子函数
this.pubId=pubsub.subscribe('hello',this.demo);//订阅消息
},
//取消订阅
beforeDestroy(){
pubsub.unsubscribe(this.pubId);//根据消息的id取消订阅
}
}
</script>
<style scoped>
.demo2{
background-color: orange;
}
</style>
Student.vue
html
<template>
<div class="demo3">
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
import pubsub from 'pubsub-js';
export default {
name:'Student',
data() {
return {
name:'罗小黑',
age:23
}
},
methods:{
sendStudentName(){
pubsub.publish('hello',666);//发布消息
}
}
}
</script>
<style scoped>
.demo3{
background-color: skyblue;
}
</style>