本文由Mcbai在眾成翻譯平臺上翻譯。

有多種方式可以在vue中定義模板元件。我算了一下，至少有7種不同的方法：

• 字串（String）

• 模板字串（Template literal）

• X-Templates

• 內聯（Inline）

• Render函式（Render functions）

• JSX

• 單檔案元件（Single page components）

當然，可能還有更多方法!

在這篇文章裡，我們將會展示每一個方法的示例，分析其優缺點，以便你能明白在特定的情形下，哪種方式是合適的。

1. 字串

預設情況下，在JS檔案裡模板會被定義為一個字串。但是我覺得大家都會同意這種寫法很難看懂，它除了有廣泛的瀏覽器支援之外，並沒有什麼優勢。

Vue.component('my-checkbox', {

  template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>',

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check

  }

});

2. 模板字串（Template literals）

通過ES6的模板字串（反引號）語法，你在定義模板時可以直接換行，這是通過常規的JavaScript字串沒法做到的。這種寫法更容易閱讀，並且這種模板字串語法得到了許多新版本瀏覽器的支援。當然，為了安全起見，你仍然應該把它轉譯為ES5的語法形式。

然而，這種方式並不完美，我發現大多數的IDE在語法高亮上做的差強人意，並且在縮排和換行等的格式方面，仍然很痛苦。

Vue.component('my-checkbox', {

  template: `<div class="checkbox-wrapper"

              <div :class="{ checkbox: true, checked: checked }"></div>

              <div class="title">{{ title }}</div>

            </div>`,

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

3. X-Templates

使用這種方法，你需要在index.html檔案裡的script標籤中定義你的模板。script標籤需要新增text/x-template型別作為標記，並且在定義元件時，通過id來引用。

我喜歡這種方式，它允許你使用真正的HTML標記來書寫你的HTML檔案，但是不足之處在於，這種方式會把模板和元件其它部分的定義分開。

Vue.component('my-checkbox', {

  template: '#checkbox-template',

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

<script type="text/x-template" id="checkbox-template">

<div class="checkbox-wrapper" @click="check">

<div :class="{ checkbox: true, checked: checked }"></div>

<div class="title">{{ title }}</div>

</div>

</script>

4. 內聯模板（Inline Templates）

通過給元件新增inline-template屬性來告訴Vue，裡面的內容就是模板，而不是把它當作是分發內容(見 slots)。

它的缺點和x-templates一樣，但是有一個優點就是，它的內容就在HTML模板對應的位置，所以頁面一載入就會渲染，而不用等到JavaScript執行。

Vue.component('my-checkbox', {

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  }

});

<my-checkbox inline-template>

  <div class="checkbox-wrapper" @click="check">

    <div :class="{ checkbox: true, checked: checked }"></div>

    <div class="title">{{ title }}</div>

  </div>

</my-checkbox>

5. Render functions（渲染函式）

渲染函式需要你把模板當作一個JavaScript物件來進行定義，它們是一些複雜並且抽象的模板選項。

然而，它的優點是你定義的模板更接近編譯器，你可以使用所有JavaScript方法，而不僅是指令提供的那些功能。

Vue.component('my-checkbox', {

  data() {

    return { checked: false, title: 'Check me' }

  },

  methods: {

    check() { this.checked = !this.checked; }

  },

  render(createElement) {

    return createElement(

      'div',

        {

          attrs: {

            'class': 'checkbox-wrapper'

          },

          on: {

            click: this.check

          }

        },

        [

          createElement(

            'div',

            {

              'class': {

                checkbox: true,