十八、Vue组建化开发之模板分离

组件化过程中，若代码模板没有抽离出来，Vue中都充满着大量的html代码，严重影响美观，我们可以将模板抽离出来，然后调用模板。

使用模板

1）使用template id="名字"定义模板标签

2）components属性中，使用template:'#'名字找到该模板

<div id="app">
    <com></com>
    <com1></com1>
</div>
<template id="com1">
    <div>
        <h2>模板分离</h2>
        <p>自如初</p>
    </div>
</template>

<script>
    // 模板没有分离
    Vue.component('com',{
       template:`<div><h1>模板没有分离</h1></div>`
    });
    // 模板分离
    Vue.component('com1',{
        template:'#com1'
    });

    var app = new Vue({
        el:"#app",
    });
</script>

上述的案例中，一个没有抽离，一个进行了抽离，可以很直观的看到的，抽离之后更加优雅。

2020-12-04