uni-app組件的基本使用方法是什么

本文小編為大家詳細介紹“uni-app組件的基本使用方法是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“uni-app組件的基本使用方法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1.組件概念

首先講一下什么是組件

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

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

2.組件分類

uni-app的組件，分為基礎組件和擴展組件。

2.1基礎組件

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

2.2 擴展組件

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

封裝擴展組件的優勢：

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

使用擴展組件可以直接從插件市場通過Hbuilder進行導入到項目中，一般默認導入uni_modules目錄。

2.3 easycom規范

HBuilderX 2.5.5起支持

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

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

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

如果你的組件名稱或路徑不符合easycom的默認規范，可以在pages.json的easycom節點進行個性化設置，自定義匹配組件的策略。

3.自定義組件以及使用

目錄結構如下:

創建組件: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.導入組件
  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頁面中使用(直接使用即可,無需導入和注冊):

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

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

展示效果:

讀到這里，這篇“uni-app組件的基本使用方法是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。