# 兄弟间传值（ 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> ```