Vue组件通信

• 1） 父组件给子组件传值

利用Vue的组件机制，父亲组件通过 v-bind指令给子组件绑定一个属性，属性值为父组件要传递的数据（变量也可以），若父亲组件中对应的数据改变，子组件中同样会改变。

传递  父亲组件给子组件绑定一个属性：如下图

//传递 messageFromParent这个变量。<child v-bind:msg="messageFromParent"></child>//传递一个常量。<child v-bind:msg="'我是个常量'"></child>

子组件接收  父亲组件给子组件绑定一个属性：如下图

props 是父组件用来传递数据的一个自定义属性，这里定义组件要接收的属性及属性的校验（关于属性校验请自行看官方的文档）

Vue.component('child',{
    props:['msg'],
});

相关示例代码

<template id="parent">
  <div>
    <h1>我是父亲节点</h1>
    <child v-bind:msg="messageFromParent"></child>
    <button @click='changeMsg'>点我改变消息内容，子组件内信息同时会改变</button>
  </div>
</template>
<template id="child">
  <div>
    <h2>{{msg}}</h2>
  </div>
</template>//子组件Vue.component('child',{
    props:['msg'],
    template:"#child"});//父亲组件Vue.component('parent',{
data(){  return {
    messageFromParent:"我是从父亲来的文字"
  }
},
template:'#parent',
methods:{
    changeMsg:function(){
        this.messageFromParent="传递过来的数据改变咯";
    }
}
});//建立vue实例var vm=new Vue({
  el:"#app",
  data:{

  }
});

• 2）  子组件给父亲组件传值

<div id='app'>
  <parent></parent></div><template id="parent">
  <div>
    <h1>我是父亲节点</h1>
    <h3>传递的信息显示在这：{{message}}</h3>
    <!-- 给子组件绑定一个自定义事件 diyevname 指定 事件处理函数为 changeMsg-->
    <child @diyevname="changeMsg"></child>
  </div></template><template id="child">
  <div>
    <button @click='sendMsg'>点我给父亲组件传值</button>
  </div></template>

//子组件Vue.component('child',{    template:"#child",    methods: {
      sendMsg() {        //发送信息
        this.$emit('diyevname','子组件发过来的信息');
      }
    }
});//父亲组件Vue.component('parent',{
data(){  return {    message:"我是初始消息"
  }
},template:'#parent',methods:{
    changeMsg(newmsg){        this.message=newmsg;
    }
}
});//建立vue实例var vm=new Vue({  el:"#app",  data:{}
});

• 3）  非父子关系组件通信

原理：通过 事件中心 去注册事件监听及事件的触发。因为每个 Vue 实例都实现了事件接口(Events interface)，通过这个可以实现事件的监听及触发。

• vue 代码

//新建事件中心var EVENT=new Vue();//全局组件AVue.component('p-a',{template:'<div  class="component"><p>我是A组件</p><button @click="add">点我向B组件发送信息</button></div>',methods:{
  add(){    //通过事件中心触发事件
    EVENT.$emit('add',
    {      id:21,      content:"花果山水帘洞111111",      time:'2016-12-13  12:14:56'
    });
  }
}
});//全局组件BVue.component('p-b',{
data(){  return {    msg:'我未接收到事件呢'
  }
},template:"<div class='component'><p>我是B组件，我负责接收事件</p>{{msg}}</div>",
created(){    var _self=this;    //创建组件之后监听事件
    EVENT.$on('add',function(data){
      _self.msg="我接收到事件了，事件参数"+JSON.stringify(data);
    });
}
});//挂载vue viewModel到DOM =>相当于 ng-app
 var vm=new Vue({    el:"#app",    data:{        msgs:[],        title:'首页'
    }
 });

• Html

<div id="app">
  <p-a></p-a>
  <p-b></p-b></div>

作者：小枫学幽默
链接：https://www.jianshu.com/p/09cff0f089f6