bus总线的原理解析
非父子组件间传递数据有很多种方式,本文从官方文档开始解析bus总线的原理1.关于官方介绍从 Vue 1.x 迁移 — Vue.js在官方文档中对bus总线的介绍是使用,但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值,bus总线应用在简单的项目1.怎么理解bus总线bus总线就是一个中间组件,触发事件,触发中间组件,监听中间组件的变化2.bus组件存在的条件和注册1.所有组件都可以访
非父子组件间传递数据有很多种方式,本文从官方文档开始解析bus总线的原理
1.关于官方介绍 从 Vue 1.x 迁移 — Vue.js
在官方文档中对bus总线的介绍是使用,但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值,bus总线应用在简单的项目
1.怎么理解bus总线
bus总线就是一个中间组件,触发事件,触发中间组件,监听中间组件的变化
2.bus组件存在的条件和注册
1.所有组件都可以访问
2.可以使用$emit,$on,$off
在项目过程中要满足这两点需求
1.所有组件都可访问
在vue的项目中,要所有组件都可以访问,那么一定在vue进行实例化之前就准备好,就是下图红色部分
2.可以使用$emit,$on,$off
有$emit,$on,$off的一定是vue的实例对象vc,或者vueComponent的实例对象vm
挂载到哪都可以访问?必然是原型上
vue.prototype.$bus = vue的实例对象/vueComponent的实例对象
第一种:
Vue.prototype.$bus = vueComponent的实例对象(所有的vueComponent的实例对象都是(Vue.extentd构造的)
第二种:
在生命周期创建之前 Vue.prototype.$bus = vue的实例对象
第三种:
利用插件进行挂载
安装 - npm install vue-bus
注册使用:
import VueBus from 'vue-bus';
Vue.use(VueBus)
3.使用
触发事件
this.$bus.$emit('事件名', 值)
监听事件
create() {
this.$bus.$on('事件名', (值) = > {
})
}
销毁事件
this.$bus.$off('事件名')
在理解bus总线的前提,是需要理解,为什么写在vue的原型上就可以访问?可以自行思考一下,涉及了一些vue的原理
码字不易,记得点赞哦!
更多推荐
所有评论(0)