- 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();
//全局组件A
Vue.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'
});
}
}
});
//全局组件B
Vue.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>
