【Vue】零基础学习Vue: 第20课 Vue定义子组件template的常见3种写法：

第一种写法：

 template:`
我是子组件3
`

第二种写法：

    

        
我是子组件1
    

第三种写法：

    

        
我是子组件2
    

那么子组件该怎么实现呢，我们定义3个不同的子组件来演示

    
    vue组件
    
    




    
    
    
    




    

        
我是子组件1
    




    

        
我是子组件2
    





    //1.定义子组件one
    let one = {
        template:'#one1'
    }
    //1.定义子组件two
    let two = {
        template:'#two1'
    }
    //1.定义子组件 three
    let three = {
        template:`
我是子组件3
`,   //3.子组件写法3 子组件three
    }

    let vm = new Vue({
        el:'#app',  //这是根组件
        components:{	//2.注册组件
            one,
            two,
            three
        }
    })

运行结果如下：

我是子组件1 我是子组件2 我是子组件3