# 兄弟間傳值（ Event Bus） <br> ***** 兄弟之間傳值（Event Bus） * 1. 通過中介 new Vue() * 2. 通過中介上$emit()觸發自定義事件 * 3. 然后在需要接受值的位置，通過中介上的$on()監聽自定義事件 <br> ``` <div id="app"> <my-con1></my-con1> <my-con2></my-con2> </div> <script> var bus = new Vue();//實例一個第三方vue對象 new Vue({ el: '#app', components:{ 'MyCon1':{ template: '<button @click="changeA" :style="{color: color}">按鈕1</button>', data:function(){ return { color:'red' } }, methods: { // 按鈕1的點擊事件 changeA() { // 自定義事件 bus.$emit('changecolor', this.color); } }, // 生命周期函數 created() { // 改變當前的this指向 var a = this // 監聽按鈕2自定義事件的觸發 bus.$on('getcolor', function (c) { a.color = c }) } }, 'MyCon2': { template: '<button @click = "changeC2" :style="{color: color}">按鈕2</button>', methods: { // 按鈕2的點擊事件 changeC2() { bus.$emit('getcolor',this.color) } }, data: function () { return { color: 'yellow' } }, // 生命周期（從創建到銷毀） created jquery.ready() js onLoad created() { // 創建組件的時候會觸發我們的created這個鉤子函數（生命周期函數） // 改變當前的this指向 var self = this // 監聽按鈕1中自定義事件的觸發 bus.$on('changecolor', function (c) { self.color = c }) } } }, }) </script> ```