vue2知识点：组件模板定义

文章目录

• ​​3.8模板​​

• ​​3.8.1直接字符串​​
• ​​3.8.2 x-template模板​​
• ​​3.8.3 template标签​​
• ​​3.8.4 省略is​​

• ​​本人其他相关文章链接​​

3.8模板

当模板的 html 结构比较复杂时，直接在 template 属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:

问题：什么叫在使用字符串模板、x-template模板和.Vue组件时，不需要is进行转义？

答案：不需要转义如图1，需要转义如图2（详情请看知识点导航3.4.4）

<script type="text/x-template" id="template5">
    <table>
        <my-component1></my-component1>
    </table>
</script>
Vue.component('my-component2',{
    template:'#template2'
});

图1

<table>
       <tr is="my-component3">      
 </table>
<template id="template3">
    <ol>
        <li>a</li>
        <li>b</li>
    </ol>
</template>
Vue.component('my-component3',{
    template:'#template3'
});

图2

3.8.1直接字符串

var temp = '<h4>直接字符串</h4>';
Vue.component('my-component1',{
    template:temp
});

3.8.2 x-template模板

<!-- 使用x-template -->
<script type="text/x-template" id="template2">
    <ul>
        <li>01</li>
        <li>02</li>
    </ul>
</script>
Vue.component('my-component2',{
    template:'#template2'
});

3.8.3 template标签

<!-- 使用template标签 -->
<template id="template3">
    <ol>
        <li>a</li>
        <li>b</li>
    </ol>
</template>
Vue.component('my-component3',{
    template:'#template3'
});

3.8.4 省略is

<!-- 使用x-template -->
<script type="text/x-template" id="template5">
    <table>
        <my-component1></my-component1>
    </table>
</script>
Vue.component('my-component6',{
    template:'#template5'
});

正常<table><ol><ul><select>等都不能直接使用自定义组件标签，除非指定is属性，而在4种实现模板方式中除了<template>模板，其他3种如字符串模板和x-template模板和.vue组件时中可以直接嵌套自定义组件标签，不用is指定。