六喂江、$bus事件總線的使用
1）配置事件總線
// src/main.js
new Vue({
render: h => h(App),
// 注冊路由
router,
store,
// 全局事件總線配置
beforeCreate() {
Vue.prototype.$bus = this
},
}).$mount('#app')
2）使用
- 發(fā)送
<!-- src/components/Test/$busTest/EmitTest.vue -->
<template>
<div>
<button @click="handleClick">清空OnTest組件中的message</button>
</div>
</template>
<script>
export default {
name: "EmitTest",
data() {
return {
newMessage: "新的message"
}
},
methods: {
handleClick() {
// 發(fā)送不含參數(shù)參數(shù)
// this.$bus.$emit('$busTest')
// 發(fā)送含有參數(shù)
this.$bus.$emit('$busTest', this.newMessage)
}
},
}
</script>
<style lang="less" scoped>
</style>
- 接收
<!-- src/components/Test/$busTest/OnTest.vue -->
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name: "OnTest",
data() {
return {
message: "事件總線測試",
};
},
mounted () {
// 接受不含參數(shù)參數(shù)
// this.$bus.$on("$busTest", () => {
// this.message = "不含參數(shù)"
// })
// 接受含有參數(shù)
this.$bus.$on("$busTest", (newMessage) => {
this.message = newMessage
})
},
};
</script>
<style lang="less" scoped>
</style>
