前言

有時候有一組html結構的程式碼，並且這個上面可能還綁定了事件。然後這段程式碼可能有多個地方都被使用到了，如果都是拷貝來拷貝去，很多程式碼都是重複的，包括事件部分的程式碼都是重複的。那麼這時候我們就可以把這些程式碼封裝成一個元件，以後在使用的時候就跟使用普通的html元素一樣，拿過來用就可以了。

基本使用

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
<script>
  // 定義一個名為 button-counter 的新元件
  Vue.component('ButtonCounter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button @click="count++">點選了{{ count }}次</button>'
  })
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>
 

以上我們建立了一個叫做button-counter的元件，這個元件實現了能夠記錄點選了多少次按鈕的功能。後期如果我們想要使用，就直接通過button-counter使用就可以了。然後因為元件是可複用的Vue例項，所以它們與new Vue接收相同的選項，例如data、computed、watch、methods以及生命週期鉤子等。僅有的例外是像el這樣根例項特有的選項。另外需要注意的是：元件中的data必須為一個函式！

我們來看下實現的效果

我們上面使用了3次button-counter元件，所以頁面會顯示3個，並且每個元件都會各自獨立維護它的 count，因為你每用一次元件，就會有一個它的新例項被建立。每個例項可以維護一份被返回物件的獨立的拷貝，這就是我們data