uni-app 自定義組件

1. 前言

前面小節我們講過uni-app 組件，包括一些常用組件的用法。像<view></view>、<text></text>這類的基礎組件，我們可以直接使用，不需要提前定義，因為這些是系統幫我們預設好的。

但是這些系統預設的基礎組件不能滿足我們所有的開發需求，在 uni-app 項目中，我們可以根據項目的開發需求去自定義組件。

那如何去創建自定義組件并且引用呢？其實有開始標簽和結束標簽都可以理解為組件，下面我們來具體了解一下自定的組件的創建與引用。

2. 自定義組件的創建

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

后面將該組件通過 import 的方式導入，再在 components 中進行注冊就可以像基礎組件一樣使用了。

2.1創建一個自定義組件。

打開 HBuilder 開發者工具，之前創建過的項目會自動打開。在前面小節中我們創建過 imoocProjects 項目，就會出現在 HBuilder 開發者工具中的頁面左側。

展開項目目錄，右鍵點擊 components 文件夾，選擇新建組件。

勾選創建同名目錄，將組件命名為 login。

點擊創建， components 文件夾下面會出現一個名為login的文件夾，下面有一個login.vue文件，我們打開這個文件，系統會默認幫我們創建以下代碼。

實例：

<template>
  <view>

  </view>
</template>

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

<style>

</style>

這樣一個自定義的組件就創建好了，目前這個組件還是空的，沒有實質上的內容，為了方便大家更好的去了解自定義組件，我們來模擬實際開發過程中的例子，定義一下組件的內容。

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

我們只需要來自定義一個登錄彈窗組件，到時在頁面中直接調用這個組件就可以了。

2.2自定義登錄彈窗組件

2.2.1 在 <template > 標簽中添加組件的頁面結構代碼

<template>
  <view>
    <view class="modal-mask"></view>
    <view class="modal-dialog">
      <view class="modal-content">
        <p>慕課網wiki</p>
      </view>
      <button>授權登錄</button>
    </view>
  </view>
</template>

2.2.2 在 <style> 標簽中添加組件樣式代碼

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

該組件我們只定義了頁面結構代碼和樣式代碼，頁面邏輯會在組件引用的時候定義，所以沒有在 <script> 標簽中定義邏輯代碼，這個根據實際開發需求來就可以了。

3.自定義組件的引用

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

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

3.1 引入并使用組件

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

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

3.2 使用組件

在 template 標簽下面使用組件

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

3.3 查看效果

點擊工具欄–運行–運行到內置瀏覽器，出現下面的效果，說明我們的自定義組件創建并使用成功了。

到了這一步就算完成了自定義組件的創建和引用。但有時明明成功引用了組件，但是組件卻沒有顯示出來，并且也沒有報錯。

這種情況往往是因為新創建的組件沒有被重新編譯，大多數情況下，重啟編譯器組件就可以正常顯示了。

4. 小結

使用自定義組件可以讓我們更加靈活的進行項目開發，組件可以理解為項目的一個個零件，我們通過組裝這些零件來完成項目的開發。

在自定義組件中，我們可以根據項目需求定義自己的屬性和方法，所以自定義組件適應的業務場景很廣泛。善用自定義組件進行開發，使我們的項目復用性更高、可維護性更強并且降低了組件之間重復性。

跟著本小節的學習，我們模擬了一個實際的業務場景，創建了一個登陸彈窗組件，并且在頁面中引用顯示出組件。主要了解了如何創建并引用 uni-app 自定義組件，本節課程需要掌握的知識點如下：

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

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