uni-app入門教程之組件的基本使用
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10JS實(shí)現(xiàn)的ajax和同源策略(實(shí)例講解)
下面小編就為大家分享一篇JS實(shí)現(xiàn)的ajax和同源策略的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12JavaScript Event事件學(xué)習(xí)第一章 Event介紹
Events是每一個(gè)JavaScript程序核心。什么是事件處理,它有什么問題和怎樣寫出跨瀏覽器的代碼,我將在這一章做一個(gè)概述。我也會(huì)提供一些有精彩的關(guān)于事件處理程序的細(xì)節(jié)的文章。2010-02-02詳解JavaScript運(yùn)算符中==和===的區(qū)別
在JavaScript中==運(yùn)算符和===運(yùn)算符是經(jīng)常遇到的,那么二者有哪些區(qū)別呢,本文就來和大家進(jìn)行簡單的討論,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)2023-05-05小程序自定義單頁面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序自定義單頁面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03webpack配置proxyTable時(shí)pathRewrite無效的解決方法
這篇文章主要介紹了webpack配置proxyTable時(shí)pathRewrite無效的解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12JS實(shí)現(xiàn)jQuery的append功能
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過查找資料, 封裝一個(gè)可以實(shí)現(xiàn)同樣效果的方法.2021-05-05