Vue组件通信

父组件传值子组件

<counter :count=”1”></counter>   

var vm = new Vue({
props:[“count”],  //子组件需要声明接收的prop属性名称
template:’<div>{{count}}</div>’  // 使用
})

子组件传值父组件

<child @delete="handleDelete"></child>      // 父组件接收delete事件

Vue.component("child",{
  template:’<div @click='sendToFather'>子传值给父</div>’,
  methods:{
    sendToFather:function(){
      this.$emit('delete',12)   // 向上发送一个delete事件，传入12
    }
  }
})

非父子组件通信

发布订阅模式 / 总线模式

我们使用一个空的Vue实例作为总线。

Vue.prototype.bus = new Vue()

通过总线发送和接收事件

  Vue.component('child-emit',{
      Template : ’<div @click=”handleChildClick”>发送</div>’,
      Methods:{
        handleChildClick:function(){
          this.bus.$emit('change',123)   // emit 发送key为change的值
          }
      }
  })

     Vue.component('child-on',{
       Template : ’<div>接收</div>’,
       Mount:function(){
          var that = this
          This.bus.$on(‘change’,function(msg){
       //  on 接收key为change的值，传入回调函数   msg = 123
          })               
        }
  })