全域註冊

昨天介紹了 Vue 中非常重要的元件，今天我們就來看看元件究竟要怎麼使用吧！
首先來是全域註冊的方式，直接來看範例：

<div id="app">
    <row-component></row-component>
</div>

Vue.component('row-component', {
  template: `<div><p>{{message}}</p></div>`,
  data: function () {
    return {
      message: 'Hello World!'
    }
  },
})

new Vue({
  el: '#app',
  data: {}
})

這裡有幾點需要注意的，我來說明一下，首先第一點是元件必須是註冊在 Vue 的根實體 ( new Vue ) 之前，如果將 Vue.component() 和 new Vue() 的位置互換的話，是沒辦法運行的，再來第二個重點是元件裡的 data 是用涵式 return 的方式建立的，和 Vue 應用程式內的 data 建立方式不太一樣唷！

局部註冊

如果元件不需要共用的話，也可以使用局部註冊的方式，來看下面的範例：

<div id="app">
    <row-component></row-component>
</div>

var child = {
    template: `<div><p>{{message}}</p></div>`,
    data () {
      return {
            message: 'Hello World!'
      }
  }
}
new Vue({
  el: '#app',
  data: {},
  components: {
      'row-component': child
  }
})

這兩者運行的結果並沒有什麼的差別，只是局部註冊就只能在上該 Vue 的應用程式中使用，但是全域註冊可以在所有的 Vue 應用程式使用。

使用 x-template 建立元件

如果像上面的兩種方式直接將 HTML 字串撰寫在 template 裡，當你的內容越來越多的時候，就會發現相當的凌亂而且不便於閱讀、維護，這時就可以將 HTML的模版區塊用 X-Template 的方式封裝起來再使用的話，這樣是不是比較好閱讀了呢！？

<div id="app">
  <row-component></row-component>
</div>

<script type="text/x-template" id="rowComponentTemplate">
    <div><p>{{message}}</p></div>
</script>

var child = {
    template: '#rowComponentTemplate',
    data () {
      return {
            message: 'Hello World!'
      }
  }
}

new Vue({
  el: '#app',
  data: {},
  components: {
      'row-component': child
  }
})

使用 is 掛載 template

上面的範例是先將 HTML 模版區塊用 X-Template 的方式封裝起來再使用，而使用的方式也可以利用 is 掛載上去。

<div id="app">
  <div is="row-component"></div>
</div>

<script type="text/x-template" id="rowComponentTemplate">
    <div><p>{{message}}</p></div>
</script>

元件的部份會稍微有點複雜，所以建議先消化好再繼續往下看，再次強調元件的概念在 Vue 之中是相當重要的，所以一定要弄清楚唷！

那麼，明天再見囉！