添加$bus属性
首先在Vue的prototype原型对象上添加$bus属性,属性的值为当前的Vue对象,作为全局事件调度器,这里我们在beforeCreate钩子函数中添加
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
}
}).$mount('#app')
发送事件
下面是定义了一个test事件,进行测试,最后也不要忘了在组件销毁的时候注销事件
<template>
<div>
<HelloWorld ref="hello" @test="getMessage"/>
<button @click="send">发送</button>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
mounted(){
this.$bus.$on("test",this.getMessage)
},
methods:{
getMessage(msg){
alert(msg)
},
send(){
this.$bus.$emit("test","全局事件")
}
},
beforeDestroy() {
this.$bus.$off("test")
}
}
</script>
<style>
</style>
效果如下
网友评论