//引入vue依賴
import Vue from 'vue'
//引入組件App
import App from './App.vue'

// 關閉生產提示
Vue.config.productionTip = false

//創(chuàng)建一個vue實例
new Vue({
  render: h => h(App),
  beforeCreate(){
    //通常在beforeCreate生命周期函數中進行事件總線的設置。
    //下面代碼就是把vm對象本身設置到Vue的原型對象中，屬性名通常是$bus,這個不強制
    Vue.prototype.$bus = this;
  }

  //配置該vue實例管理id為app的容器
}).$mount('#app')

<template>
    <!-- 編寫結構 -->
    <div>
        <A></A>
    <hr>
    <B></B>
    </div>
</template>

<script>


//修改后的
//引入A組件和B組件,涉及es模塊化的語法
import A from "./components/A.vue"
import B from "./components/B.vue"

export default {


    components:{
        //注冊組件
        A,
        B
    }
}
</script>

<style>

</style>

<template>
    <div>
        <div>B組件的名稱：{{name}}</div>
        <div>A組件的名稱：{{NameForA}}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:"yehaocong",
            NameForA:""
        }
    },
    methods:{
        //觸發(fā)事件時的回調函數
        getNameFromA(nameFromAVC){
            console.log("接收來自A組件的名稱：",nameFromAVC);
            this.NameForA = nameFromAVC;
        }
    },
    mounted() {
        //往事件總線總綁定自定義事件。
        this.$bus.$on("getNameFromA",this.getNameFromA);
    },
    beforeDestroy() {
        //通常在組件銷毀時，需要解綁自定義事件。
        this.$bus.$off("getNameFromA")
    },
}
</script>

<style>

</style>

<template>
    <div>
        <div>{{name}}</div>
        <button @click="sendName">發(fā)送name屬性值到其他組件</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:"liaoxianyan"
        }
    },
    methods: {
        sendName(){
            //發(fā)送方觸發(fā)事件
            this.$bus.$emit("getNameFromA",this.name);
        }
    },
}
</script>

<style>

</style>