vue组件非父子之间通信

视图如下：

单击点击后：

下列为实现代码：

html:

<dvi id="app">
    <brother></brother>
    <hr>
    <sbrother></sbrother>
</dvi>
 
<template id="brother">
    <div>
        哥哥
        {{ msg }}
        <button @click="gchan">点击</button>
    </div>
</template>
 
<template id="sbrother">
    <div>
        弟弟
        {{ msg }}
        {{ change() }}
    </div>
</template>
js:

//创建一个空的Vue用于存放数据
    let bus=new Vue({});
    Vue.component("brother",{
        template:"#brother",
        data(){
            return{
                msg:"我是你哥哥"
            }
        },
        created:{
 
        },
        methods:{
            gchan(){
                //将数据放入bus
                bus.$emit("tass",this.msg)
            }
        }
    });
    Vue.component("sbrother",{
        template:"#sbrother",
        data(){
            return{
                msg:"我是你弟弟"
            }
        },
        mounted:{
 
        },
        methods:{
            change(){
                //监听bus，发生变化的时候，改变msg。
                bus.$on("tass",(val)=>{
                    this.msg=val;
                })
            }
        }
    });
 
    new Vue({
        el:"#app"
    })