Vue.js组件嵌套和template外用

Vue.extend组件的嵌套和template外用

组件嵌套分为全局组件嵌套和局部组件嵌套

  • 组件嵌套需要将子元素写在父元素内
  • 子组件必须在父组件中注册之后才能在父组件的模板中使用

全局组件嵌套

Vue.component('Father',{
    template: '

father

'
//这里要把子组件加进来 }) Vue.component('Son',{ template: '

son

'
}) new Vue({ el: '#app', })

局部组件嵌套

new Vue({
    el: '#app',
    components: {
        'Father': {
            template: '
father
'
,//这里也要把子组件加进来,组件可以使用单标签 components: { 'Son': {//子组件必须在父组件内创建才行 template: '

Son

'
} } } } })

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'//这里的作用相当于根实例中的el:'app' ;作用一样,都是挂载
})

new Vue({
    el: '#app',
})


你可能感兴趣的:(Vue.js组件嵌套和template外用)