1.組件概念

首先講一下什么是組件

官方說法：
組件是視圖層的基本組成單元。 組件是一個單獨且可復(fù)用的功能模塊的封裝。

實際上組件可以理解為相當(dāng)于html中的一個標(biāo)簽.比如說快標(biāo)簽div、行標(biāo)簽span。

2.組件分類

uni-app的組件，分為基礎(chǔ)組件和擴展組件。

2.1基礎(chǔ)組件

基礎(chǔ)組件是內(nèi)置在uni-app框架中的，包括view、text、input、button、video等幾十個基礎(chǔ)組件，常用組件可以參考官網(wǎng)： uni-app基礎(chǔ)組件.
但僅有基礎(chǔ)組件是不夠用的，實際開發(fā)中會有很多封裝的組件。

2.2 擴展組件

雖然所有的業(yè)務(wù)需求都可以通過基礎(chǔ)組件滿足，但僅有基礎(chǔ)組件是低效的，實際開發(fā)中會有很多封裝的組件。這就是擴展組件存在的意義。除了基礎(chǔ)組件，都稱為擴展組件。擴展組件需要將組件導(dǎo)入項目中才可以使用。

封裝擴展組件的優(yōu)勢：

可以將組件進行任意次數(shù)的復(fù)用。合理的劃分組件，有助于提高應(yīng)用性能。代碼更加方便組織和管理，并且擴展性也更強，便于多人協(xié)同開發(fā)。組件化開發(fā)能大幅度提高應(yīng)用開發(fā)效率、測試性、復(fù)用性等。

使用擴展組件可以直接從插件市場通過Hbuilder進行導(dǎo)入到項目中，一般默認(rèn)導(dǎo)入uni_modules目錄。插件地址： https://ext.dcloud.net.cn/

2.3 easycom規(guī)范

HBuilderX 2.5.5起支持

傳統(tǒng)vue組件，需要安裝、引用、注冊，三個步驟后才能使用組件。easycom將其精簡為一步。

只要組件安裝在項目的components目錄下或uni_modules目錄下，并符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)。就可以不用引用、注冊，直接在頁面中使用。

easycom是自動開啟的，不需要手動開啟。

如果你的組件名稱或路徑不符合easycom的默認(rèn)規(guī)范，可以在pages.json的easycom節(jié)點進行個性化設(shè)置，自定義匹配組件的策略。具體可以參考：
https://uniapp.dcloud.net.cn/collocation/pages.html#easycom

3.自定義組件以及使用

目錄結(jié)構(gòu)如下:

創(chuàng)建組件:my-componet

<template>
  <view class="my-componet-box">
    {{title}}
  </view>
</template>

<script>
  export default {
    // 聲明組件名
    name:"my-componet",
    data() {
      return {
        title:'我是自定義組件!'
      };
    }
  }
</script>

<style>
  .my-componet-box{
    width: 100rpx;
    height: 120rpx;
    background-color: green;
  }
</style>

3.1局部注冊

局部注冊(僅在注冊頁面使用,示例在test頁面中使用):

<template>
  <view>
  	<!-- 3.使用組件 -->
     <my-componet></my-componet>
  </view>
</template>

<script>
 // 1.導(dǎo)入組件
  import myComponet from '@/components/my-componet/my-componet.vue'
  export default {
  // 2.注冊組件
    components:{
      myComponet
    },
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style>

</style>

效果展示,test頁面中顯示自定義組件:

3.2全局注冊

全局注冊(各個頁面均可使用):

main.js中:

import Vue from 'vue'
import myComonet from '@/components/my-component'
Vue.component('my-comonet',myComonet )

示例在mine頁面中使用(直接使用即可,無需導(dǎo)入和注冊):

<template>
  <view>
    <my-componet></my-componet>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }

展示效果:

uniapp中更多組件使用可以參考:
https://uniapp.dcloud.net.cn/tutorial/vue-components.html

總結(jié)

uni-app作為一款跨平臺開發(fā)框架，其組件的使用是非常重要的一部分。本文詳細(xì)介紹了uni-app組件的基本使用方法，希望能夠幫助讀者更好地掌握uni-app的開發(fā)技巧，提高開發(fā)效率。同時，也歡迎讀者在實踐中發(fā)現(xiàn)問題并與我們分享，共同推動uni-app的發(fā)展。到此這篇關(guān)于uni-app入門教程之組件的基本使用的文章就介紹到這了,更多相關(guān)uni-app組件的基本使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論