Vue（11）組件化的基本使用

• 2021 年 7 月 2 日
• 筆記
• VUE

前言

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