Vue.extend组件的嵌套和template外用
组件嵌套分为全局组件嵌套和局部组件嵌套
- 组件嵌套需要将子元素写在父元素内
- 子组件必须在父组件中注册之后才能在父组件的模板中使用
全局组件嵌套
Vue.component('Father',{
template: '<h3> father <Son></Son> </h3>'
})
Vue.component('Son',{
template: '<h3> son </h3>'
})
new Vue({
el: '#app',
})
局部组件嵌套
new Vue({
el: '#app',
components: {
'Father': {
template: '<div> father <Son/> </div>',
components: {
'Son': {
template: '<h3> Son </h3>'
}
}
}
}
})
template的外用
注意:template外用,组件模板中的第一个元素必须唯一
<body>
<div id="app">
<Hello></Hello>
</div>
<template id="Hello">
<div class="content">
<ul>
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
</ul>
</div>
</template>
</body>
Vue.component('Hello',{
template: '#Hello'
})
new Vue({
el: '#app',
})