Vue消息发布与订阅

在Vue的原型上定义一个变量bus,在所有的组件里都可以这个变量，使用this.bus.$emit()发布消息，this.bus.$on订阅消息

<!--  在Vue的原型上定义一个变量bus，所有Vue的实例或组件都将共享这个bus，可以用bus来发布消息或订阅消息  -->
    Vue.prototype.bus = new Vue();
    new Vue({
        el: '#root',
        mounted(){
            // 在所有的组件上都可以订阅这条消息
            // 参数1发布者的名称，参数3接收的值
            this.bus.$on('chen',(msg)=>{
                console.log(msg)
            })
        },
        components: {
            com:{
                template: "<button @click='sub'>子组件</button>",
                methods: {
                    // 在发布者定义发布者
                    sub(){
                        // 参数1发布者名称，参数2传递的值
                        this.bus.$emit('chen',"这是子组件传给去的值")
                    }
                }
            },
            com1:{
                template: "<div>子组件2</div>",
                mounted(){
                    // 在子组件里同样可以订阅
                    this.bus.$on('chen',(msg)=>{
                        console.log(msg)
                    })
                },
            },
        }
    })