uni-app入門教程之組件的基本使用
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript自執(zhí)行函數(shù)和jQuery擴展方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript自執(zhí)行函數(shù)和jQuery擴展方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10JavaScript Event事件學(xué)習(xí)第一章 Event介紹
Events是每一個JavaScript程序核心。什么是事件處理,它有什么問題和怎樣寫出跨瀏覽器的代碼,我將在這一章做一個概述。我也會提供一些有精彩的關(guān)于事件處理程序的細(xì)節(jié)的文章。2010-02-02小程序自定義單頁面、全局導(dǎo)航欄的實現(xiàn)代碼
這篇文章主要介紹了小程序自定義單頁面、全局導(dǎo)航欄的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03webpack配置proxyTable時pathRewrite無效的解決方法
這篇文章主要介紹了webpack配置proxyTable時pathRewrite無效的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12