返回

vue中eventBus的使用

Created By ZOU on Jul 27 2019

项目开发中经常会使用的vuex,但是如果不使用vuex的话如何实现跨组件响应,eventBus就可以实现这样的操作

1.实现跨组件传值

const eventBus = new Vue()
// 组件1
const FirstComponent = {
created() {
// 监听事件,接收值value
eventBus.$on('changeValue', value => {
// 打印value
console.log(value)
})
}
}
// 组件2
const SecondComponent = {
created() {
// 触发事件,传值value
eventBus.$emit('changeValue', 321)
}
}

2.跨组件响应,搜索数据,列表响应

const eventBus = new Vue()
// 列表组件
const ListComponent = {
created() {
// 监听事件,接收值value
eventBus.$on('search', keywords => {
// 打印value
console.log(keywords)
this.getList()
})
},
destroyed() {
// 注册过事件,记得销毁
eventBus.$off('search')
},
methods: {
getList() {
// 获取数据....
}
}
}
// 搜索组件
<input type="search" @search="onSearch"/>
const SearchComponent = {
data() {
return {
// 关键字
keywords: ''
}
},
methods: {
onSearch(event) {
// 事件分发
eventBus.$emit('search', event.target.value)
}
}
}
标签: javascript vue