Vue组件--引用模板

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/codesWay/article/details/79482830

如果说组件的template内容结构比较简单，可以直接写在template选项中；但是当自定义组件的template内容比较复杂的时候，直接写就不合适了，也容易出错，所以：

对于这种状况Vue给出了自己的解决方案：使用模板，使用Vue的内置template模板来包裹着模板内容

 <template id="foreignerName">
        <!-- <template/>标签内部被包裹着的内容必须有且只有一个根元素，在这里的根元素是ul -->
        <ul>
            <li v-for="item in nameArr">{{item}}</li>
        </ul>
    </template>

这个模板要写在Vue实例的外面，这里template的id属性的值是自定义的，配合js部分用来标识模板内容；但是有一点值得注意， 那就是被template包裹着的内容有且只有一个根元素，在这里是ul元素

JS部分

 Vue.component("my-haha",{//如果template模板内容比较复杂，那么就可以这样做
            template:"#foreignerName",//对应于template中的id属性
            data:function(){
                return {
                    nameArr:["Alice","Marry","Athena"]
                }
            }
        })

HTML部分

 <div id="container" v-cloak>
        <h3>{{name}}</h3>
        <my-comp></my-comp>
        <!-- 当自定义组件的template模板内容比较复杂的时候 -->
        <my-haha></my-haha>
    </div>