Vue全局事件总线

目标: 实现A向B通信

1. 确定全局事件总线: 将vm对象作为事件总线挂载到vue的原型对象上
	new Vue({
		beforeCreate () {
			Vue.prototype.$bus = this
		}
	})
2. A组件: 调用(分发)事件
	this.$bus.$emit('xxx', data)
3. B组件: 绑定事件监听
	this.$bus.$on('xxx', this.fn)
	
	methods{
		fn (data) {
			
		}
	}
功能: 实现任意组件间通信

• 案例展示
  App.vue

<template>
    <div>
        <!-- <Child @myModel="myModel"/> -->
        <Child ref="myChild"/>
        <div>{{ChildMessage}}</div>
        <div>{{GlobalMessage}}</div>
    </div>
</template>
<script>
import Child from './components/Child.vue'
export default {
    name: "App",
    mounted() {
        this.$refs.myChild.$on("myModel",this.myModel);
        this.$bus.$on("global",this.global)
    },
    components:{
        Child
    },
    data(){
        return{
            ChildMessage:"~~~",
            GlobalMessage:"~~~"
        }
    },
    methods: {
        myModel(value){
            this.ChildMessage = this.ChildMessage+value
        },
        global(value){
            this.GlobalMessage = this.GlobalMessage + value
        }
    },
};
</script>
<style scoped>
</style>

Child.vue

<template>
    <div>
        <button @click="myM">自定义组件</button>
        <button @click="myG">全局事件组件</button>
    </div>
</template>
<script>
export default {
    name: "",
    methods: {
        myM(){
            this.$emit("myModel","子传父")
        },
        myG(){
            this.$bus.$emit("global","Global")
        }
    },
};
</script>
<style scoped>
</style>