檢視如下：

單擊點選後：

下列為實現程式碼：

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"
    })