Vue之全局事件总线
一、理解1.1、 Vue 原型对象上包含事件处理的方法$on(eventName, listener): 绑定自定义事件监听$emit(eventName, data): 分发自定义事件$off(eventName): 解绑自定义事件监听$once(eventName, listener): 绑定事件监听, 但只能处理一次1.2、所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象所有组件
·
文章预览
参考文章:
https://segmentfault.com/a/1190000019208626
一、理解
1.1、 Vue 原型对象上包含事件处理的方法
- $on(eventName, listener): 绑定自定义事件监听
- $emit(eventName, data): 分发自定义事件
- $off(eventName): 解绑自定义事件监听
- $once(eventName, listener): 绑定事件监听, 但只能处理一次
1.2、所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象
- 所有组件对象都能看到 Vue 原型对象上的属性和方法
- Vue.prototype.
b
u
s
=
n
e
w
V
u
e
(
)
,
所
有
的
组
件
对
象
都
能
看
到
bus = new Vue(), 所有的组件对象都能看到
bus=newVue(),所有的组件对象都能看到bus 这个属性
对象
1.3、全局事件总线
- 包含事件处理相关方法的对象(只有一个)
- 所有的组件都可以得到
二、实现
2.1、指定事件总线对象
new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
Vue.prototype.$globalEventBus = this
},
}).$mount('#root')
2.2、绑定事件
其中this.deleteTodo
表示一个回调函数
this.$globalEventBus.$on('deleteTodo', this.deleteTodo)
2.3、分发事件
其中this.data
表示要传递的数据
this.$globalEventBus.$emit('deleteTodo', this.data)
2.4、解绑事件
this.$globalEventBus.$off('deleteTodo')
三、示例
假设兄弟组件有三个,分别是A、B、C组件,C组件如何获取A或者B组件的数据
<div id="itany">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
<template id="a">
<div>
<h3>A组件:{{name}}</h3>
<button @click="send">将数据发送给C组件</button>
</div>
</template>
<template id="b">
<div>
<h3>B组件:{{age}}</h3>
<button @click="send">将数组发送给C组件</button>
</div>
</template>
<template id="c">
<div>
<h3>C组件:{{name}},{{age}}</h3>
</div>
</template>
<script>
var Event = new Vue();//定义一个空的Vue实例
var A = {
template: '#a',
data() {
return {
name: 'tom'
}
},
methods: {
send() {
Event.$emit('data-a', this.name);
}
}
}
var B = {
template: '#b',
data() {
return {
age: 20
}
},
methods: {
send() {
Event.$emit('data-b', this.age);
}
}
}
var C = {
template: '#c',
data() {
return {
name: '',
age: ""
}
},
mounted() {//在模板编译完成后执行
Event.$on('data-a',name => {
this.name = name;//箭头函数内部不会产生新的this,这边如果不用=>,this指代Event
})
Event.$on('data-b',age => {
this.age = age;
})
}
}
var vm = new Vue({
el: '#itany',
components: {
'my-a': A,
'my-b': B,
'my-c': C
}
});
</script>
参考文章:
更多的组件之间通信方式参考以下文章
https://segmentfault.com/a/1190000019208626
更多推荐
已为社区贡献1条内容
所有评论(0)