前言
上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础。我在上一篇文章中埋下了一个小小的伏笔。如下图:
我说过,在Vue中如果我们用(@
orv-on
)给组件绑定上一个自定义事件,其本质就是给子组件VueComponent
即vc
绑定一个事件,然后子组件通过this.$emit()
触发,父组件监听到再执行回调方法。这种也只适合于父子组件之间通信,对于兄弟组件来说,仍然无法非常方便的通信。
那全局事件总线是什么样的呢?
一、全局事件总线前述
提供一个思考方向:
其他组件同样如此。
那么到这一步,我们要明白一件事情哈,全局事件总线,全局两个字,意思是在全局都能够访问到。并且能够绑定方法呢?
即xxxx
中保证要能够有$on、$off、$emit
这些方法,才能够实现组件间通信。
那么只有哪里有??
我们之前给子组件绑定自定义事件的时候,其本质是不是给子组件的实例对象new VueComponent
绑定上一个自定义事件。
在这个全局事件总线中,我们就不能再给每个组件的实例对象来绑定自定义事件了,而是要将自定义事件绑定到一个全部组件都能够访问的对象上。
那么那个对象大家都能够访问?看下图吧。
---图:来自于尚硅谷-张天宇老师
我们将它放在vue原型上,那么全局事件总线就能够做到任意间组件通信拉。
二、安装全局事件总线
我们弄明白要去找谁了,就要将它定义出来,不然怎么用啊。
标准定义如下:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 关于全局总线的使用说明
// 使用全局总线的时候,更好的应用是在兄弟组件、祖孙组件之间,这些组件他们并不能做到直接通信,这个使用全局事件总线会方便很多
new Vue({
render: h => h(App),
// beforeCreate 位于数据挂载之前的生命周期函数
beforeCreate () {
// 安装全局事件总线 $bus就是当前应用的vm 这里的this就是当前的new Vue()
Vue.prototype.$bus = this
}
}).$mount('#app')
beforCreate()方法
是众多生命周期中最前面的一个。在此时,它的this
就是当前的vue
.
三、使用全局事件总线
1、接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。即是图示中的第一步。
// 回车增加一个todo
addTodo (todo) {
this.todos.unshift(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)
},
// 全选全不选
checkAllTodos (done) {
this.todos.forEach((todo) => { todo.done = done })
},
// 清除所有已完成的任务
clearDoneTodos () {
this.todos = this.todos.filter(todo => !todo.done)
}
},
// 在加载完成后就进行全局总线的绑定
mounted () {
this.$bus.$on('addTodo', this.addTodo)
this.$bus.$on('checkTodo', this.checkTodo)
this.$bus.$on('deleteTodo', this.deleteTodo)
},
2、提供数据:this.$bus.$emit('xxxx',数据)
methods: {
add () {
// 1. 检查输入合法性
const title = this.title.trim()
if (!title) {
alert('请输入内容')
return
}
const id = uuidv4()
// 2. 根据输入生成一个todo对象
const todo = { id, title, done: false }
// 3. 添加到todos
this.$bus.$emit('addTodo', todo)
// 4. 清除输入
this.title = ''
}
}
}
注意
:最后在beforeDestory
钩子中,用$off
去解绑当前组件所用到的事件。
如下图:
解绑有多种方式,$off()
不写参数,是直接解绑全部
一个参数$off('xxx')
是解绑一个,解绑多个可以写成$off(['xx','xxx'])
后语
大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感谢。
纸上得来终觉浅,绝知此事要躬行。
大家好,我是博主
宁在春
:主页一名喜欢文艺却踏上编程这条道路的小青年。
希望:
我们,待别日相见时,都已有所成
。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。