组件模板分离

组件模板的分离写法

###   script标签

​ 使用`script`标签定义组件的模板,`script`标签注意类型是`text/x-template`。

```html
  <!-- 1.script标签注意类型是text/x-template -->
  <script type="text/x-template" id="cpn1">
    <div>
        <h2>组件模板的分离写法</h2>
        <p>script标签注意类型是text/x-template</p>
      </div>
  </script>
```

###   template标签

​ 使用`template`标签,将内容写在标签内。

```html
  <!-- 2.template标签 -->
  <template id="cpn2">
    <div>
      <h2>组件模板的分离写法</h2>
      <p>template标签</p>
    </div>
  </template>
```

> 调用分离的模板,使用`template:'#cpn1'`

```html
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: "#app",
      components: { //局部组件创建
        cpn1:{
          template:'#cpn1'
        },
        cpn2: {
          template: '#cpn2'
        }
      }
    })
  </script>
```
posted @ 2021-04-24 10:15  好吗,好  阅读(55)  评论(0)    收藏  举报