Vue组件--引用模板

Vue组件：高级模板使用指南

最新推荐文章于 2025-10-02 18:14:31 发布

原创最新推荐文章于 2025-10-02 18:14:31 发布 · 7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Vue组件 #模板

Vue-51CTO 专栏收录该内容

21 篇文章

订阅专栏

当Vue组件的模板内容变得复杂时，直接在template选项中编写会变得困难且易出错。为解决这一问题，Vue提供了一种使用外部模板的方法，通过内置的template标签来包裹组件的模板内容，实现更清晰、易于维护的组件结构。

如果说组件的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>