Vue 组件的嵌套
组件的嵌套:子组件以标签的形式要在父组件的模板中使用
template 模板内直接子元素有且仅有一个 (所以套个div)
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>Father</p>
<son></son>
</div>
</template>
<template id="son">
<div>
<p>Son</p>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
Vue.component('Father', {
template: '#father'
})
Vue.component('Son', {
template: '#son'
})
new Vue({
el: '#app'
})
</script>
组件的嵌套 之 局部
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>I am father</p>
<son></son>
</div>
</template>
<template id="son">
<div>
<p>I am son</p>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
'Father': {
template: '#father',
components: {
'Son': {
template: '#son'
}
}
}
}
})
</script>