vue父子組件
- 父子組件
- 組件意味著協(xié)同工作辜羊，通常父子組件會是這樣的關(guān)系：組件 A 在它的模版中使用了組件 B 踏兜。
- 最簡單的父子組件
<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({
//注冊子組件
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);
//注冊組件
Vue.component('my-child', Child);
Vue.component('parent-component', Child);
//4.vue實例
new Vue({
el:'#app'
});
</script>
- 在父子組件組合使用中要注意以下一些問題：
> 沒有實例化的子組件不能拿出來單獨使用！
```
<div id="app">
<parent-component></parent-component>
<child-component></child-component>
</div>
```
> 在父標簽內(nèi)部嵌套子標簽
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
因為在父標簽一旦生成真實的DOM八秃，其內(nèi)部的子標簽就會被解析成為普通的HTML標簽來執(zhí)行碱妆，而且
<child-component>不是標準的HTML標簽，會被瀏覽器過濾掉昔驱。
