快捷導(dǎo)航

Vue 組件化基本使用詳情

更新時(shí)間：2021年10月27日 09:04:13 作者：Silent丿丶黑羽

這篇文章主要給大家分享的是Vue 組件化基本使用，所謂組件化，就是把頁(yè)面拆分成多個(gè)組件，每個(gè)組件依賴的 CSS、JS、模板、圖片等資源放在一起開發(fā)和維護(hù)。因?yàn)榻M件是資源獨(dú)立的，所以組件在系統(tǒng)內(nèi)部可復(fù)用，組件和組件之間可以嵌套，下面來(lái)看文章學(xué)習(xí)內(nèi)容吧

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

1、什么叫做組件化

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

2、基本使用

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

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

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

我們來(lái)看下實(shí)現(xiàn)的效果：

我們上面使用了3次button-counter組件，所以頁(yè)面會(huì)顯示3個(gè)，并且每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的 count，因?yàn)槟忝坑靡淮谓M件，就會(huì)有一個(gè)它的新實(shí)例被創(chuàng)建。每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，這就是我們data中使用函數(shù)的原因

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

您可能感興趣的文章: