Vue CLI 全局事件总线 消息的订阅与发布
3.10. 全局事件总线（GlobalEventBus）
一种可以在任意组件间通信的方式，本质上就是一个对象，它必须满足以下条件
- 所有的组件对象都必须能看见他
- 这个对象必须能够使用$on $emit $off方法去绑定、触发和解绑事件
使用步骤
- 定义全局事件总线 main.js
new Vue({ ... beforeCreate() { Vue.prototype.$bus = this; // 安装全局事件总线 }, ... }) - 使用事件总线
- 接收数据：A组件想接收数据，则在A组件中给**$bus**绑定自定义事件，事件的回调留在A组件自身
export default { methods() { demo(data) { ... } } ... mounted() { this.$bus.$on('xxx',this.demo) } }- 提供数据：this.$bus.$emit(‘xxx’,data)
- 最好在beforeDestroy钩子中，用$off()去解绑当前组件所用到的事件
src/main.js
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this; // 安装全局事件总线
}
})
src/App.vue
<template>
<div class="app">
<h1>{{ msg }}</h1>
<School/>
<Student/>
</div>
</template>
<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
name:'App',
components:{
Student,
School
},
data() {
return {
msg:'你好啊！'
}
}
}
</script>
<style scoped>
.app{
background-color: gray;
padding: 5px;
}
</style>
src/components/School.vue
<template>
<div class="school">
<h2 >学校地址：{{address}}</h2>
<h2>学校名称：{{name}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name: "莆田学院",
address: '福建莆田'
}
},
mounted() {
this.$bus.$on("hello", (data) => {
console.log("我是School组件，收到了数据", data);
});
},
beforeDestroy() {
this.$bus.$off("hello");
}
}
</script>
<style scoped>
.school{
background-color: skyblue;
}
</style>
src/components/Student.vue
<template>
<div class="student">
<h2>学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name: "liqb",
sex: '男'
}
},
methods: {
sendStudentName() {
this.$bus.$emit('hello', this.name);
}
}
}
</script>
<style lang="less" scoped>
.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>
使用自定义事件优化Todo-List
src/mian.js
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this; // 安装全局事件总线
}
})
src/App.vue
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<MyHeader @addTodo="addTodo"/>
<MyList :todos="todos"/>
<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
</div>
</div>
</div>
</template>
<script>
// 引入组件
import MyFooter from './components/MyFooter';
import MyHeader from './components/MyHeader';
import MyList from './components/MyList';
export default {
name:'App',
components:{
MyFooter,
MyHeader,
MyList
},
data() {
return {
// 从本地存储中获得数据，null就创建空数组[]
todos: JSON.parse(localStorage.getItem('todos')) || []
}
},
methods: {
// 添加一个todo
addTodo(todoObj) {
this.todos.unshift(todoObj);
},
// 勾选or取消勾选一个todo
checkTodo(id) {
this.todos.forEach((todo)=>{
if(todo.id === id) todo.done = !todo.done;
});
},
// 删除一个todo
deleteTodo(id) {
this.todos = this.todos.filter( todo => todo.id !== id )
},
// 全选or取消全选
checkAllTodo(done){
this.todos.forEach((todo)=>{
todo.done = done;
});
},
// 清除所有已经完成的todo
clearAllTodo(){
this.todos = this.todos.filter((todo)=>{
return !todo.done;
})
}
},
mounted() {
this.$bus.$on("checkTodo", this.checkTodo);
this.$bus.$on("deleteTodo", this.deleteTodo);
},
beforeDestroy() {
this.$bus.$off("checkTodo");
this.$bus.$off("deleteTodo");
},
// 数据发生改变就放到本地存储中，注意深度侦听，以及JSON转化为字符串
watch: {
todos: {
deep:true,
handler(value) {
localStorage.setItem('todos', JSON.stringify(value));
}
}
}
}
</script>
src/components/MyItem.vue
<template>
<li>
<label>
<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
<!-- <input type="checkbox" v-model="todo.done"/> -->
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
<span>{{todo.title}}</span>
</label>
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</li>
</template>
<script>
export default {
name: "Item",
// 声明接收todo
props:['todo'],
methods: {
// 勾选or取消勾选
handleCheck(id) {
// 通知App组件将对应的todo对象的done值取反
this.$bus.$emit('checkTodo',id);
},
// 删除
handleDelete(id){
if(confirm('确定删除吗？')) {
// 通知App组件将对应的todo对象删除
this.$bus.$emit('deleteTodo',id);
}
}
}
}
</script>
3.11. 消息的订阅与发布（基本不用）
消息订阅与发布（pubsub）消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信
使用步骤
- 安装pubsub：npm i pubsub-js
- 引入：import pubsub from ‘pubsub-js’
- 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
export default { methods: { demo(msgName, data) { ... } } ... mounted() { this.pid = pubsub.subscribe('xxx',this.demo); } } - 提供数据：pubsub.publish(‘xxx’,data)
- 最好在beforeDestroy钩子中，使用**pubsub.unsubscribe(pid)**取消订阅
src/components/School.vue
<template>
<div class="school">
<h2 >学校地址：{{address}}</h2>
<h2>学校名称：{{name}}</h2>
</div>
</template>
<script>
import pubsub from 'pubsub-js';
export default {
name:'School',
data() {
return {
name: "莆田学院",
address: '福建莆田'
}
},
methods: {
demo(msgName, data) {
console.log('我是School组件，收到了数据：',msgName, data)
}
},
mounted() {
this.pubId = pubsub.subscribe('hello', this.demo);
},
beforeDestroy() {
pubsub.unsubscribe(this.pubId) // 取消订阅
}
}
</script>
<style scoped>
.school{
background-color: skyblue;
}
</style>
src/components/Student.vue
<template>
<div class="student">
<h2>学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
import pubsub from 'pubsub-js';
export default {
name:'Student',
data() {
return {
name: "liqb",
sex: '男'
}
},
methods: {
sendStudentName() {
pubsub.publish('hello', this.name) // 发布消息
}
}
}
</script>
<style lang="less" scoped>
.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>
使用消息的订阅与发布优化Todo-List
src/App.vue
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<MyHeader @addTodo="addTodo"/>
<MyList :todos="todos"/>
<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
</div>
</div>
</div>
</template>
<script>
// 引入组件
import pubsub from 'pubsub-js';
import MyFooter from './components/MyFooter';
import MyHeader from './components/MyHeader';
import MyList from './components/MyList';
export default {
name:'App',
components:{
MyFooter,
MyHeader,
MyList
},
data() {
return {
// 从本地存储中获得数据，null就创建空数组[]
todos: JSON.parse(localStorage.getItem('todos')) || []
}
},
methods: {
// 添加一个todo
addTodo(todoObj) {
this.todos.unshift(todoObj);
},
// 勾选or取消勾选一个todo
checkTodo(id) {
this.todos.forEach((todo)=>{
console.log(todo.id);
if(todo.id === id) todo.done = !todo.done;
});
},
// 删除一个todo
deleteTodo(_, id) {
this.todos = this.todos.filter( todo => todo.id !== id )
},
// 全选or取消全选
checkAllTodo(done) {
this.todos.forEach((todo)=>{
todo.done = done;
});
},
// 清除所有已经完成的todo
clearAllTodo() {
this.todos = this.todos.filter((todo)=>{
return !todo.done;
})
}
},
mounted() {
this.$bus.$on("checkTodo", this.checkTodo);
this.pubId = pubsub.subscribe('deleteTodo', this.deleteTodo);
},
beforeDestroy() {
this.$bus.$off("checkTodo");
pubsub.unsubscribe(this.pubId) // 取消订阅
},
// 数据发生改变就放到本地存储中，注意深度侦听，以及JSON转化为字符串
watch: {
todos: {
deep:true,
handler(value) {
localStorage.setItem('todos', JSON.stringify(value));
}
}
}
}
</script>
src/components/myItem.vue
<template>
<li>
<label>
<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
<!-- <input type="checkbox" v-model="todo.done"/> -->
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
<span>{{todo.title}}</span>
</label>
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</li>
</template>
<script>
import pubsub from 'pubsub-js';
export default {
name: "Item",
// 声明接收todo
props:['todo'],
methods: {
// 勾选or取消勾选
handleCheck(id) {
// 通知App组件将对应的todo对象的done值取反
this.$bus.$emit('checkTodo',id);
},
// 删除
handleDelete(id){
if(confirm('确定删除吗？')) {
// 通知App组件将对应的todo对象删除
pubsub.publish('deleteTodo', id) // 发布消息
}
}
}
}
</script>