兄弟组件之间的通信

原理

兄弟之间传值借助的是子组件->父组件 父组件->子组件

     <div id="app">
       <a-acomponent ></a-acomponent>
       <b-bcomponent ></b-bcomponent>
     </div>

  Vue.component('a-bcomponent', {
           template: '<div>我是a 组件</div>'
       })
  Vue.component(b-component', {
           template: '<div>我是b组件</div>'
       })
  var  app = new Vue({
         el : '#app',
         data: { }
 })

css:

// 下面这段加到 A组件 中
computed: {
    style: function () {
      return {
        border: '1px solid red'
      }
    }
}

// 下面这段加到 B组件 中
computed: {
    style: function () {
      return {
        border: '1px solid green',
        marginTop: '10px'
      }
    }
}

在 A组件 中添加点击事件

Vue.component('a-component', {
  template: `<div :style="style">
    我是A组件
    <button @click="handle">点我向B传递数据</button> 
  </div>`,
  data: function () {   
    return {
      number: 123
    }
  },
  methods: {
    handle: function () {
      console.log(1)
    }
  },
  computed: {
    style: function () {
      return {
        border: '1px solid red'
      }
    }
  }
})

在父组件声明一个 bus

var app = new Vue({
  el: '#app',
  data: {
    bus: new Vue()  // data 中有个 bus 实例
  }
})

A组件 触发自定义事件，并传递数据

methods: {
    handle: function () {
      console.log(1)
      this.$root.bus.$emit('xxx', this.number)  // 触发 xxx 事件，并传递 number
    }
},

B组件监听自定义事件，并接收数据

Vue.component('b-component', {
  // 为了让效果更明显，在 B组件 中先渲染 number
  template: '<div :style="style">我是B组件--{{number}}</div>',
  data: function () {
    return {
      number: 0
    }
  },
  // created 生命周期函数：实例创建完成， 但是还没有挂载到 DOM
  created: function () {
    var that = this    // 这里为什么要把 this 保存起来？
    this.$root.bus.$on('xxx', function (value) {
      that.number = value  // 因为如果在函数里面的函数直接用this，this的值可能会改变
    })                     // 上面把 this 赋值给 that，那么 that 就是 Vue实例
  },                       // 你也可以使用 ES6 中的 箭头函数，这样 this 的值就不会变了

  computed: {
    style: function () {
      return {
        border: '1px solid green',
        marginTop: '10px'
      }
    }
  }
})

当点击 A组件 中的按钮时，就会将 A组件 中的 123 传递给 B组件，并在 B组件 中渲染出来。
按钮点击前：

按钮点击后：