uni-app 自定義組件

1. 前言

前面小節(jié)我們講過uni-app 組件，包括一些常用組件的用法。像<view></view>、<text></text>這類的基礎(chǔ)組件，我們可以直接使用，不需要提前定義，因?yàn)檫@些是系統(tǒng)幫我們預(yù)設(shè)好的。

但是這些系統(tǒng)預(yù)設(shè)的基礎(chǔ)組件不能滿足我們所有的開發(fā)需求，在 uni-app 項(xiàng)目中，我們可以根據(jù)項(xiàng)目的開發(fā)需求去自定義組件。

那如何去創(chuàng)建自定義組件并且引用呢？其實(shí)有開始標(biāo)簽和結(jié)束標(biāo)簽都可以理解為組件，下面我們來具體了解一下自定的組件的創(chuàng)建與引用。

2. 自定義組件的創(chuàng)建

在 uni-app 項(xiàng)目中，我們可以通過HBuilder 開發(fā)者工具新建一個(gè)后綴名為 .vue 的文件，在這個(gè) .vue 文件中創(chuàng)建自定義組件。

后面將該組件通過 import 的方式導(dǎo)入，再在 components 中進(jìn)行注冊就可以像基礎(chǔ)組件一樣使用了。

2.1創(chuàng)建一個(gè)自定義組件。

打開 HBuilder 開發(fā)者工具，之前創(chuàng)建過的項(xiàng)目會自動打開。在前面小節(jié)中我們創(chuàng)建過 imoocProjects 項(xiàng)目，就會出現(xiàn)在 HBuilder 開發(fā)者工具中的頁面左側(cè)。

展開項(xiàng)目目錄，右鍵點(diǎn)擊 components 文件夾，選擇新建組件。

勾選創(chuàng)建同名目錄，將組件命名為 login。

點(diǎn)擊創(chuàng)建， components 文件夾下面會出現(xiàn)一個(gè)名為login的文件夾，下面有一個(gè)login.vue文件，我們打開這個(gè)文件，系統(tǒng)會默認(rèn)幫我們創(chuàng)建以下代碼。

實(shí)例：

<template>
  <view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
      };
    }
  }
</script>

<style>

</style>

這樣一個(gè)自定義的組件就創(chuàng)建好了，目前這個(gè)組件還是空的，沒有實(shí)質(zhì)上的內(nèi)容，為了方便大家更好的去了解自定義組件，我們來模擬實(shí)際開發(fā)過程中的例子，定義一下組件的內(nèi)容。

模擬一個(gè)實(shí)際的業(yè)務(wù)場景：假設(shè)我們想做一個(gè)有登錄權(quán)限的應(yīng)用，部分頁面需要用戶登錄后才能查看，點(diǎn)擊這些頁面時(shí)，需要彈出登錄彈窗方便用戶登錄。如果在每個(gè)頁面都寫一個(gè)登錄彈窗，會大大降低應(yīng)用的可維護(hù)性，這時(shí)自定義彈窗就有了用武之地。

我們只需要來自定義一個(gè)登錄彈窗組件，到時(shí)在頁面中直接調(diào)用這個(gè)組件就可以了。

2.2自定義登錄彈窗組件

2.2.1 在 <template > 標(biāo)簽中添加組件的頁面結(jié)構(gòu)代碼

<template>
  <view>
    <view class="modal-mask"></view>
    <view class="modal-dialog">
      <view class="modal-content">
        <p>慕課網(wǎng)wiki</p>
      </view>
      <button>授權(quán)登錄</button>
    </view>
  </view>
</template>

2.2.2 在 <style> 標(biāo)簽中添加組件樣式代碼

<style>
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  opacity: 0.5;
  z-index: 9000;
}
.modal-dialog {
  width: 560rpx;
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  margin: -150rpx 95rpx;
  border-radius: 16rpx;
}
.modal-content {
  display: flex;
  padding: 10rpx 53rpx 50rpx 53rpx;
  font-size: 32rpx;
  justify-content: center;
}
button {
  background:#feb600;
}
</style>

該組件我們只定義了頁面結(jié)構(gòu)代碼和樣式代碼，頁面邏輯會在組件引用的時(shí)候定義，所以沒有在 <script> 標(biāo)簽中定義邏輯代碼，這個(gè)根據(jù)實(shí)際開發(fā)需求來就可以了。

3.自定義組件的引用

上面我們做了一個(gè)登錄彈窗，如果想要將登錄彈窗顯示出來，就需要先引入注冊組件。

比如我們想在首頁顯示登錄彈窗，就需要在 pages/index/index.vue 文件中引入 login.vue 這個(gè)組件，下面我們來操作一下。

3.1 引入并使用組件

在 pages/index/index.vue 文件 script 標(biāo)簽下面引入并注冊組件。

<script>
  //引入組件
  import Login from "components/login/login.vue"
  export default {
    //注冊組件
    components: {
      Login
    }
  }
</script>

3.2 使用組件

在 template 標(biāo)簽下面使用組件

<template>
  <view>
    <!-- 使用組件 -->
    <Login></Login>
  </view>
</template>

3.3 查看效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，出現(xiàn)下面的效果，說明我們的自定義組件創(chuàng)建并使用成功了。

到了這一步就算完成了自定義組件的創(chuàng)建和引用。但有時(shí)明明成功引用了組件，但是組件卻沒有顯示出來，并且也沒有報(bào)錯(cuò)。

這種情況往往是因?yàn)樾聞?chuàng)建的組件沒有被重新編譯，大多數(shù)情況下，重啟編譯器組件就可以正常顯示了。

4. 小結(jié)

使用自定義組件可以讓我們更加靈活的進(jìn)行項(xiàng)目開發(fā)，組件可以理解為項(xiàng)目的一個(gè)個(gè)零件，我們通過組裝這些零件來完成項(xiàng)目的開發(fā)。

在自定義組件中，我們可以根據(jù)項(xiàng)目需求定義自己的屬性和方法，所以自定義組件適應(yīng)的業(yè)務(wù)場景很廣泛。善用自定義組件進(jìn)行開發(fā)，使我們的項(xiàng)目復(fù)用性更高、可維護(hù)性更強(qiáng)并且降低了組件之間重復(fù)性。

跟著本小節(jié)的學(xué)習(xí)，我們模擬了一個(gè)實(shí)際的業(yè)務(wù)場景，創(chuàng)建了一個(gè)登陸彈窗組件，并且在頁面中引用顯示出組件。主要了解了如何創(chuàng)建并引用 uni-app 自定義組件，本節(jié)課程需要掌握的知識點(diǎn)如下：

• 掌握如何在 HBuilder 開發(fā)者工具中創(chuàng)建自定義組件，并理解如何在組件中填充代碼；

• 了解并掌握怎樣引入并注冊自定義組件，將組件中的內(nèi)容顯示在頁面中。