版权声明:本文为博主原创文章,未经博主允许不得转载。 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>