1.組件概念

首先講一下什么是組件

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

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

2.組件分類

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

2.1基礎(chǔ)組件

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

2.2 擴(kuò)展組件

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

封裝擴(kuò)展組件的優(yōu)勢(shì)：

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

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

2.3 easycom規(guī)范

HBuilderX 2.5.5起支持

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

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

easycom是自動(dòng)開啟的，不需要手動(dòng)開啟。

如果你的組件名稱或路徑不符合easycom的默認(rèn)規(guī)范，可以在pages.json的easycom節(jié)點(diǎn)進(jìn)行個(gè)性化設(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局部注冊(cè)

局部注冊(cè)(僅在注冊(cè)頁面使用,示例在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.注冊(cè)組件
    components:{
      myComponet
    },
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style>

</style>

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

3.2全局注冊(cè)

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

main.js中:

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

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

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

最新評(píng)論