Vue消息总线

vue消息总线

1. 注册消息总线
   main.js中注册消息总线

 	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')

2. 被调用组件中注册方法

	methods:{
	        changeStudentName(name){
	            console.log('接收到的数据',name)
	            this.studentInfo=name
	        }
	    },
    mounted() {
        this.$bus.$on('changeStudentName',this.changeStudentName)
    },
    beforeDestroy(){
        this.$bus.$off('changeStudentName')
    }

3. 调用组件中监听方法

	methods:{
	        myinfo(name){
	            console.log('发送',name)
	            this.$bus.$emit('changeStudentName',name)
	        }
	    },