前言：

有時候有一組html結(jié)構(gòu)的代碼，并且這個上面可能還綁定了事件。然后這段代碼可能有多個地方都被使用到了，如果都是拷貝來拷貝去，很多代碼都是重復(fù)的，包括事件部分的代碼都是重復(fù)的。那么這時候我們就可以把這些代碼封裝成一個組件，以后在使用的時候就跟使用普通的html元素一樣，拿過來用就可以了。

1、什么叫做組件化

vue.js 有兩大法寶，一個是數(shù)據(jù)驅(qū)動，另一個就是組件化，那么問題來了，什么叫做組件化，為什么要組件化？接下來我就針對這兩個問題一一解答，所謂組件化，就是把頁面拆分成多個組件，每個組件依賴的 CSS、JS、模板、圖片等資源放在一起開發(fā)和維護。 因為組件是資源獨立的，所以組件在系統(tǒng)內(nèi)部可復(fù)用，組件和組件之間可以嵌套，如果項目比較復(fù)雜，可以極大簡化代碼量，并且對后期的需求變更和維護也更加友好。

2、基本使用

<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>

以上我們創(chuàng)建了一個叫做button-counter的組件，這個組件實現(xiàn)了能夠記錄點擊了多少次按鈕的功能。后期如果我們想要使用，就直接通過button-counter使用就可以了。然后因為組件是可復(fù)用的Vue實例，所以它們與new Vue接收相同的選項，例如data、computed、watch、methods以及生命周期鉤子等。僅有的例外是像el這樣根實例特有的選項。

另外需要注意的是：組件中的data必須為一個函數(shù)！

我們來看下實現(xiàn)的效果：

我們上面使用了3次button-counter組件，所以頁面會顯示3個，并且每個組件都會各自獨立維護它的 count，因為你每用一次組件，就會有一個它的新實例被創(chuàng)建。每個實例可以維護一份被返回對象的獨立的拷貝，這就是我們data中使用函數(shù)的原因

到此這篇關(guān)于Vue 組件化基本使用詳情 的文章就介紹到這了,更多相關(guān)Vue 組件化使用 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論