在父组件中定义子组件
我们除了定义独立的组件之外，Vue还支持在父组件中定义子组件。
示例
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<template id="parent">
<h1>父组件</h1> <children></children>
</template>
<template id="children">
<h2>子组件</h2>
</template>
<div id="app">
<parent></parent>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//定义父组件
Vue.component('parent',{
template:'#parent'
//在父组件中定义子组件
,components:{
'children':{
template:'#children'
}
}
});
new Vue({
el:'#app'
});
</script>
</body>
</html>
结果
分析
如上面所示，我们在父组件parent中定义子组件children，由于子组件children是在父组件中定义的，所以说要想使用子组件，则子组件<children></children>必须在父组件中使用，不能在父组件之外的地方使用。
父组件向子组件传值
在项目开发中，随着我们定义的组件越来越多，也就越来越多的涉及到组件间传值的情况，我这里主要是讲解父组件向子组件传值的情况。
示例
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<template id="parent">
<h1>父组件:传值id={{id}}</h1> <children :id="id"></children>
</template>
<template id="children">
<h2>子组件:接收id={{id}}</h2>
</template>
<div id="app">
<parent></parent>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//定义父组件
Vue.component('parent',{
template:'#parent'
,data(){
return {
id:10
}
}
//在父组件中定义子组件
,components:{
'children':{
props:['id']
,template:'#children'
}
}
});
new Vue({
el:'#app'
});
</script>
</body>
</html>
结果
分析
上图中实现的功能是在父组件中向子组件进行传值，其传递的id值为10。这需要我们在父组件的数据域中定义一个id:10，这里需要注意的是，为了将组件间的数据域进行隔离，这里的data参数后面跟的不是对象，而是函数，用该函数返回一个对象，以此来实现组件间数据的隔离。
我们在用父组件给子组件传值时，是在父组件用到子组件的地方，在这里添加:id="id"，此时第二个id中的值指的就是父组件数据域中的id值，而其:id，指的就是子组件中的props:['id']中的id，这样我们就将父组件中的id值成功的传递给了子组件中的props:['id']中的id中，而我们在子组件中使用该值时，直接用{{id}}去取值就可以了。
子组件向父组件传值
在项目开发中，我们还会经常用到子组件给父组件传值的情况，比如说下面的示例就是如此。
示例
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<template id="parent">
<h1>父组件：接收信息 {{message}}</h1>
<children @:message="getData"></children>
</template>
<template id="children">
<h2>子组件：发送信息 {{hello}}</h2>
<button @click="sendData">发送数据</button>
</template>
<div id="app">
<parent></parent>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//定义父组件
Vue.component('parent',{
template:'#parent'
,data(){
return {
message:''
}
}
,methods:{
getData(val){
//父组件展示子组件发送来的信息
this.message = val;
}
}
//在父组件中定义子组件
,components:{
'children':{
template:'#children'
,data(){
return {
hello:''
}
}
,methods:{
//子组件发送信息
sendData(){
//子组件展示发送的信息
this.hello = 'Hello !';
//子组件发送信息
this.$emit('message',this.hello);
}
}
}
}
});
new Vue({
el:'#app'
});
</script>
</body>
</html>
结果
分析
在上面的代码中实现的功能是通过在子组件中点击发送信息按钮，在子组件中的信息就被父组件接收和展示了出来。
我们在子组件的数据域中定义了一个空的hello，通过点击子组件的发送信息按钮，其按钮绑定的事件sendData就会在子组件的方法域中查找并执行sendData()。
该sendData()方法执行了两个操作，其一是将子组件发送的信息展示在子组件面板中，其二是触发一个$emit事件发送，其发送的key为message，其值为赋值后的hello，也就是说是Hello !。
由于message被注册到了父组件引用子组件的@:message中，其值调用的则是父组件中的getData方法，因而其会在父组件中的方法域中查找并执行getData(val)方法，而该方法中的val即为父组件接收的子组件中的信息。而该信息又被赋值给了父组件数据域中的message，所以，最终在父组件中就会展示出子组件发送来的信息Hello !。