模板上:
<div id="box">
<!-- 使用组件aaa -->
<aaa></aaa>
</div>
我们给aaa组件里套一个子组件bbb:
var vm = new Vue({
el:'#box',
components:{
'aaa':{
template: '<h2>我的aaa组件,我有子组件bbb<bbb></bbb></h2>',
components:{
'bbb':{
template: '<h3>我是bbb组件</h3>',
}
}
},
}
});
注意,要在aaa的template
中使用bbb组件:<bbb></bbb>
。
父子组件数据传递
var vm = new Vue({
el:'#box',
components:{
'aaa':{
data(){
return {msg:'我是aaa组件的数据'}
},
template: '<div> aaa组件==> {{msg}} <bbb></bbb><div>',
components:{
'bbb':{
template: '<h3>我是bbb组件,{{msg}}</h3>',
}
}
},
}
});
父组件aaa定了个数据msg
,但数据是没有继承关系的,在子组件bbb中并不能使用。
父组件成功输出了自己的数据,子组件报错:找不到msg。
组件之间如何通信
我们先来看一下模板的另一种写法:
<div id="box">
<!-- 使用组件aaa -->
<aaa></aaa>
</div>
<!-- 我们把组件模板抽离出来 -->
<template id="aaa">
<h1>aaaaaaa</h1>
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
components:{
'aaa':{
data(){
return {msg:'我是aaa组件的数据'}
},
template: '#aaa',
},
}
});
</script>
上面代码,把组件模板部分抽离出去了:
<template id="aaa">
<h1>aaaaaaa</h1>
</template>
然后在组件里设置:template: '#aaa'
。
这样写代码更加简洁了。
同样还是可以嵌套子组件:
<div id="box">
<!-- 使用组件aaa -->
<aaa></aaa>
</div>
<!-- 我们把组件模板抽离出来 -->
<template id="aaa">
<!-- 小细节:要在组件里嵌套子组件的话,需要"包"起来 -->
<div>
<h1>aaaaaaa</h1>
{{msg}}
<hr>
<bbb></bbb>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
components:{
'aaa':{
data(){
return {msg:'我是aaa组件的数据'}
},
template: '#aaa',
components:{
'bbb':{
template:'<span>我是bbb</span>'
}
}
},
}
});
</script>
子组件就是想获取父组件的data
props:[ ]
1.给子组件定义属性props
用来接收父组件传递过来的数据
'bbb':{
props:['m'],
template:'<span>我是bbb==> {{m}} </span>'
},
2.因为bbb组件是在aaa组件的模板上使用的,所以在模板上可以接收aaa的data
<bbb :m="msg"></bbb>
用定义的props接收父组件的数据。
3.完整代码如下:
<div id="box">
<!-- 使用组件aaa -->
<aaa></aaa>
</div>
<!-- 我们把组件模板抽离出来 -->
<template id="aaa">
<!-- 小细节:要在组件里嵌套子组件的话,需要"包"起来 -->
<div>
<h1>aaaaaaa</h1>
{{msg}}
<hr>
<bbb :m="msg"></bbb>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
components:{
'aaa':{
data(){
return {msg:'我是aaa组件的数据'}
},
template: '#aaa',
components:{
'bbb':{
props:['m'],
template:'<span>我是bbb==> {{m}} </span>'
},
}
},
}
});
</script>