勇者斗 Vue 龙 - Vue.js 教程：模板定义

本文同步发布于：勇者斗 Vue 龙

本文为 2019 铁人赛 续篇

一般在定义模板的时候，会直接在 template 属性上设定，像是下面这样：

<div id="app">  <h2>Default Template</h2>  <default-template-component></default-template-component></div>

Vue.component('default-template-component', {  data: function() {    return {      content: 'default template component content'    };  },  template: `<div>    {{content}}    <button @click="clickBtn">alert</button>  </div>`,  methods: {    clickBtn: function() {      alert(`click ${this.content} button`);    }  }});var vm = new Vue({  el: '#app'});

这是最常用的模板定义方式，而 Vue.js 为了使组件设定更为弹性，另外设计了两种模版定义的方式： Inline Template 及 X-Template 。

Inline Template

有时我们在定义组件时会有需求先不定义模板，而是在父组件定义时在做模版的设定，这时使用 inline-template 属性可以将模板定义在组件的内部内容中。

<div id="app">  <h2>Inline Templates</h2>  <inline-template-component inline-template>    <div>      {{content}}      <button @click="clickBtn">alert</button>    </div>  </inline-template-component></div>

Vue.component('inline-template-component', {  data: function() {    return {      content: 'inline template content'    };  },  methods: {    clickBtn: function() {      alert(`click ${this.content} button`);    }  }});

在组件定义中不用设定 template 属性，直接在组件的内容中设定模板，如此一来就可以在父组件上再定义模板了。

Dynamic Component

在 <component> 中也可以使用 inline-template 属性：

<div id="app">  <h2>Dynamic Component Inline Template</h2>  <button @click="dynamicComponent='inline-template-component'">component</button>  <button @click="dynamicComponent='inline-template-component2'">component2</button>  <component :is='dynamicComponent' inline-template>    <div>      {{content}}      <button @click="clickBtn">alert</button>    </div>  </component></div>

Vue.component('inline-template-component', {  data: function() {    return {      content: 'inline template content'    };  },  methods: {    clickBtn: function() {      alert(`click ${this.content} button`);    }  }});Vue.component('inline-template-component2', {  data: function() {    return {      content: 'inline template content 2'    };  },  methods: {    clickBtn: function() {      alert(`click ${this.content} button`);    }  }});var vm = new Vue({  el: '#app',  data: {    dynamicComponent: 'inline-template-component'  }});

在 <component> 上加入 inline-template 属性动态切换组件时只要有 inline-template ，就会使用内容做模板的定义

X-Template

更进一步，如果需要使用 Vue 实体外的 html 结构作为模板定义的话，使用 <script type="text/x-template"> 标籤设定模板，并且给予 id 资讯，在组件中的 template 属性设定目标 id ：

<div id="app">  <h2>X-Template</h2>  <x-template-component></x-template-component></div><script type="text/x-template" id="x-template">  <div>    {{content}}    <button @click="clickBtn">alert</button>  </div></script>

Vue.component('x-template-component', {  data: function() {    return {      content: 'x-template content'    };  },  template: '#x-template',  methods: {    clickBtn: function() {      alert(`click ${this.content} button`);    }  }});

在 Vue app 外设定模板（<script type="text/x-template" id="x-template">），在组件的 template 设定 #x-template 。

风险

在增加弹性的同时，也会承受相当的风险：

使用 inline template 时由于是定义在 tag 的内容中，容易将模板定义及插件的使用搞混，增加阅读的困难。inline template 及 x-template 的方式会造成组件定义及模板分散，造成维护上的困难。

除了特殊的情况外，最佳的方式还是在组建定义内设定模板以避免上述的风险产生。

DEMO

CodePen

总结

对于模板的定义， Vue.js 提供了 inline template 及 x-template 这两种方法，使模板的定义方式可以延伸到父组件或是 Vue app 外，增加设定的弹性，但是也要面临代码分离及定义模糊等风险。

参考资料

Vue.js Guide: Alternate-Template-DefinitionsVue.js API: component