Vue?Element?plus使用方法梳理
更新時(shí)間：2022年12月23日 15:50:27 作者：hrj199036
Element?Plus，由餓了么大前端團(tuán)隊(duì)開源出品的一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于?Vue?3.0?的組件庫(kù)，Element?Plus是基于Vue3面向設(shè)計(jì)師和開發(fā)者的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型
說明
- 本教程適用于Element-plus的使用非常熟練
- 本教程是對(duì)Element-plus的高度總結(jié)
- 組件屬性的使用
- 組件插槽的使用
- 組件內(nèi)部事件的使用
- 組件外部方法的使用
一、組件屬性的使用
可以在組件中直接使用
<el-form
:model="form"
label-width="120px"
>
//model、label-width屬于組件屬性、上圖中可以查找
<el-form-item label="Activity name">
</el-form-item>
</el-from>
二、組件內(nèi)部事件的使用
可以在組件中直接使用
<el-dialog v-model="Data.exportcenterDialogVisible" title="導(dǎo)入數(shù)據(jù)" width="30%" @closed ="closedmenu" > <!--@closed是內(nèi)部事件調(diào)用--> </eldilog>
三、組件插槽的使用
在組件標(biāo)簽中間，添加以下代碼
<template #插槽名> <!--使用插槽方法--> </template>
例：
<template #footer>
<!--<template #footer>是插槽footer的使用 -->
<span class="dialog-footer">
<el-button type="primary" @click="alldialogvisible" v-if="!Data.isView">
保存
</el-button>
<el-button @click="closedmenu">取消</el-button>
</span>
</template>
四、組件外部方法的使用
1、使用外部方法是要調(diào)用標(biāo)簽的$refs
要在組件標(biāo)簽中定義ref屬性值（目地是為了在script中獲取標(biāo)簽）
在script中
- 先導(dǎo)入import type { uploadInstance } from ‘element-plus’
- 定義ref屬性 const ref 屬性名 = ref<uploadInstance>()
- 調(diào)用外部方法 ref屬性名.value.外部方法()(注對(duì)元素進(jìn)行操作)
2、使用方法
在組件中
<el-upload ref="uploadrefss" > <!--要在組件標(biāo)簽中定義ref屬性值--> </el-upload>
在script中
import type { UploadInstance } from 'element-plus'
const 函數(shù)名= () => {
uploadrefss.value?.clearFiles()
//clearFiles方法，對(duì)ref元素進(jìn)行操作
}
到此這篇關(guān)于Vue Element plus使用方法梳理的文章就介紹到這了,更多相關(guān)Vue Element plus內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue組寫一個(gè)組件,需要的朋友可以參考下2018-04-04
Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實(shí)現(xiàn) 點(diǎn)擊顯示 再點(diǎn)擊隱藏 點(diǎn)擊頁面空白區(qū)域也隱藏效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
在Vue.js開發(fā)中,我們經(jīng)常需要?jiǎng)?chuàng)建可復(fù)用的組件,這些組件可能會(huì)有自己的樣式規(guī)則,而有時(shí)我們希望父組件能夠影響子組件的樣式,本文將詳細(xì)介紹如何使用v-deep以及一些相關(guān)的最佳實(shí)踐,需要的朋友可以參考下2024-10-10
虛擬dom是當(dāng)前前端最流行的兩個(gè)框架（vue和react）都用到的一種技術(shù),都說他能幫助vue和react提升渲染性能,提升用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3組件更新中的DOM?diff算法的相關(guān)資料,需要的朋友可以參考下2022-04-04
淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定,需要的朋友可以參考下2022-12-12
vue全局自定義指令-元素拖拽的實(shí)現(xiàn)代碼
這篇文章主要介紹了面板拖拽之vue自定義指令,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
過濾器的功能是對(duì)要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒有改變?cè)镜臄?shù)據(jù),只是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-11-11
webpack安裝配置與常見使用過程詳解（結(jié)合vue）
這篇文章主要介紹了webpack安裝配置與常見使用過程，主要結(jié)合vue實(shí)現(xiàn)，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue-router配合ElementUI實(shí)現(xiàn)導(dǎo)航的實(shí)例
下面小編就為大家分享一篇vue-router配合ElementUI實(shí)現(xiàn)導(dǎo)航的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章介紹了使用vue-cli搭建腳手架的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03