前言
在了解父子组件之前应先掌握组件开发基础。在实际开发过程中，组件之间可以嵌套，也因此生成父子组件。
父子组件创建流程
1.构建父子组件
1.1 全局注册
(1)构建注册子组件
//构建子组件child
var child = Vue.extend({
template: '<div>这是子组件</div>'
});
//注册名为'child'的组件
Vue.component('child',child);
(2)构建注册父组件
//构建父组件parent,在其中嵌套child组件
var parent = Vue.extend({
template: '<div>这是父组件<child></child></div>'
});
Vue.component('parent',parent);
(3)定义vue实例
var app = new Vue({
el: '#app'
})
(4)使用父组件
<div id="app">
<parent></parent>
</div>
打开浏览器查看
1.2 局部注册
(1)构建子组件
var child = Vue.extend({
template: '<div>这是子组件</div>'
});
(2)构建父组件
在父组件中局部注册子组件
var parent = Vue.extend({
template: '<div>这是父组件<child></child></div>',
components:{
'child':child
}
});
(3)定义vue实例
在vue实例中局部注册父组件
var app = new Vue({
el: '#app',
components:{
'parent':parent
}
})
(4)使用父组件
<div id="app">
<parent></parent>
</div>
2.父子组件间通信
2.1 父传子
父组件传消息到子组件使用<code>props</code>，并且这传递是单向的，只能由父组件传到子组件。我们将上面例子中的父组件增加一个数据传递到子组件中渲染显示。如果父组件需要传多个数据给子组件，依次在后面加即可。
(1)在父组件中增加data，并绑定到子组件上
var parent = Vue.extend({
template: '<div>这是父组件<child :pdata=data></child></div>',
data(){
return{
data:'这是父组件传来的数据'
}
},
components:{
'child':child
}
});
其中<code><child :pdata=data></child></code>，<code>:pdata</code>是<code>v-bind:pdata</code>的缩写，<code>pdata</code>是自定义传递数据的命名，子组件中也是用该名字获取数据，<code>data</code>是父组件中数据的命名。
(2)在子组件中通过props获取数据，并渲染出来
var child = Vue.extend({
template: '<div>这是子组件 {{pdata}}</div>',
props:['pdata']
});
查看浏览器
父组件中数据发生变化，子组件中自动更新
子组件不可直接修改通过<code>props</code>获取到的父组件中的数据
下面我们通过一个例子更好的理解上面两句话
(1)使用<code><template></code>标签创建子组件
为方便书写，我们使用<code><template></code>标签创建组件
<template id="child">
<div>
<p>这是子组件</p>
<table>
<tr>
<td>name</td>
<td>{{name}}</td>
<td><input type="text" v-model="name"></td>
</tr>
<tr>
<td>age</td>
<td>{{age}}</td>
<td><input type="text" v-model="age"></td>
</tr>
</table>
</div>
</template>
这里使用<code>v-model</code>指令来双向绑定从父组件中获取到的数据
(2)使用<code><template></code>标签创建父组件
<template id="parent">
<div>
<p>这是父组件</p>
<table>
<tr>
<td>name</td>
<td>{{name}}</td>
<td><input type="text" v-model="name"></td>
</tr>
<tr>
<td>age</td>
<td>{{age}}</td>
<td><input type="text" v-model="age"></td>
</tr>
</table>
//给子组件传递2个数据
<child :name="name" :age="age"></child>
</div>
</template>
(3)构建子组件
var child = Vue.extend({
template: '#child',
props:['name','age']
});
(4)构建父组件
var parent = Vue.extend({
template: '#parent',
data(){
return{
age:16,
name:'乔巴'
}
},
components:{
'child':child
}
});
查看浏览器
接着，我们在父组件中修改输入框的值，这会引起<code>v-model</code>绑定的值变化，同时也会改变子组件中的值
然后我们试着修改子组件中输入框的值，vue会警告不能直接修改父组件传过来的值。
如果我们需要修改从父组件中props传过来的值，最好一开始把这个值赋给另外一个data。
var child = Vue.extend({
template: '#child',
props:['name','age'],
data(){
return{
name1: '',
age1: ''
}
},
//页面挂载时将props的值赋给子组件中的data
mounted:function(){
this.name1 = this.name
this.age1 = this.age
},
//同时增加监听，当props的值发生变化时，也立即赋值给子组件的data
watch:{
name:function(val){
this.name1 = this.name
},
age:function(val){
this.age1 = this.name
}
}
});
同时修改<code>v-model</code>绑定的<code>name</code>值为<code>name1</code>，<code>age</code>为<code>age1</code>
现在修改子组件中的值，就不会报错了，这是因为子组件中修改的是<code>name1</code>，并不是props传递过来的<code>name</code>值
2.1 子传父
子组件给父组件传值通过<code>emit</code>。父组件需在子组件标签上绑定<code>emit</code>事件。
例子：
(1)构建子组件
var child = Vue.extend({
template: '<div><button @click="change">点击给父组件传值</button></div>',
methods:{
change: function(){
this.$emit('posttoparent',10)
}
}
});
子组件按钮绑定了一个<code>click</code>事件，当点击按钮执行<code>change</code>方法，该方法触发<code>emit</code>事件，事件名为<code>posttoparent</code>，并且带了一个参数10。
(2)构建父组件
var parent = Vue.extend({
template: '<div>来自子组件的值为：{{datafromchild}} <child v-on:posttoparent="getfromchild"></child></div>',
data(){
return{
datafromchild:''
}
},
components:{
'child':child
},
methods: {
getfromchild: function(val){
this.datafromchild = val
}
}
});
父组件接收emit事件通过v-on指令，格式为：
v-on:emit方法名="父组件方法"
父组件将接收到的参数赋值给<code>datafromchild </code>
查看浏览器
3.兄弟组件间通信
兄弟组件间通信也是用的<code>emit</code>。但原生vue.js需要新建一个空的vue实例来当桥梁。
下面直接贴代码
//新建一个空的vue实例bus
var bus = new Vue();
var myCom1 = Vue.extend({
template: '<div><button @click="change">点击给兄弟组件传值</button></div>',
methods:{
change: function(){
//通过空实例去触发emit
bus.$emit('posttobro',10)
}
}
});
var myCom2 = Vue.extend({
template: '<div>来自兄弟组件的值为：{{datafrombro}}</div>',
data(){
return{
datafrombro:''
}
},
mounted:function(){
//接收emit事件
bus.$on('posttobro',function(val){
this.datafrombro = val
}.bind(this))
}
});
Vue.component('my-com1',myCom1);
Vue.component('my-com2',myCom2);
var app = new Vue({
el: '#app'
});
使用组件
<div id="app">
<my-com1></my-com1>
<my-com2></my-com2>
</div>
查看浏览器
