在父组件中定义子组件
我们除了定义独立的组件之外,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 !
。