前言

有時候有一組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中使用函式的原因