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