vue父子組件
- 父子組件
- 組件意味著協(xié)同工作，通常父子組件會(huì)是這樣的關(guān)系：組件 A 在它的模版中使用了組件 B 。
- 最簡(jiǎn)單的父子組件
<body>
<div id="app">
<parent-template></parent-template>
<parent-template2></parent-template2>
<my-child></my-child>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1.子組件構(gòu)造器
var Child = Vue.extend({
template:''
});
//2.父組件構(gòu)造器
var Parent = Vue.extend({
//注冊(cè)子組件
components:{
'child-template':Child
},
template:'<div><child-template></child-template><p>照片很模糊</p></div>'
});
var Parent2 = Vue.extend({
components:{
'child-template':Child
},
template:'<div><p>下面的照片很清晰!</p><child-template></child-template></div>'
});
//3.創(chuàng)建組件
Vue.component('parent-template', Parent);
Vue.component('parent-template2', Parent2);
//注冊(cè)組件
Vue.component('my-child', Child);
Vue.component('parent-component', Child);
//4.vue實(shí)例
new Vue({
el:'#app'
});
</script>
- 在父子組件組合使用中要注意以下一些問(wèn)題：
> 沒(méi)有實(shí)例化的子組件不能拿出來(lái)單獨(dú)使用！
```
<div id="app">
<parent-component></parent-component>
<child-component></child-component>
</div>
```
> 在父標(biāo)簽內(nèi)部嵌套子標(biāo)簽
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
因?yàn)樵诟笜?biāo)簽一旦生成真實(shí)的DOM，其內(nèi)部的子標(biāo)簽就會(huì)被解析成為普通的HTML標(biāo)簽來(lái)執(zhí)行，而且
<child-component>不是標(biāo)準(zhǔn)的HTML標(biāo)簽，會(huì)被瀏覽器過(guò)濾掉。
