vue3中$refs的基本使用方法
1、在vue2中可以通過(guò)this來(lái)訪問(wèn)到$refs，vue3中由于沒有this所以獲取不到了，但是官網(wǎng)中提供了方法來(lái)獲取
知道了怎么獲取后，我們結(jié)合ElementPlus來(lái)使用，因?yàn)轫?xiàng)目中用到了ElementPlus的表單驗(yàn)證，官網(wǎng)也是醉了，還寫的是vue2的寫法
話不多說(shuō)，上代碼
由于我得form表單外面包了一層el-dialog，是不能在onMounted中獲取到$refs的，應(yīng)該在觸發(fā)對(duì)應(yīng)事件，讓dialog綁定的v-model變?yōu)閠rue的獲取獲取
label-position="left"
label-width="120px"
:model="form"
:append-to-body="true"
:fullscreen="true"
:rules="rules"
ref="ruleForm"
>
<el-form-item label="舊密碼" prop="oldPwd">
<el-input v-model="form.oldPwd" placeholder="請(qǐng)輸入新密碼"></el-input>
</el-form-item>
</el-form>
<script>
import { ref} from 'vue'
export default {
setup() {
const ruleForm = ref(null)
// 提交修改密碼
const submitForm = () => {
console.log(ruleForm.value)
ruleForm.value.validate(vaild => {
if (vaild) {
console.log(1111)
} else {
console.log(222)
}
})
}
}
}
</script>
這時(shí)候就能獲取到他下面的validate方法了
第二種方法，也可以通過(guò)getCurrentInstance
在控制臺(tái)輸出一下這個(gè)方法就能看到
總結(jié)
到此這篇關(guān)于vue3中$refs的基本使用方法的文章就介紹到這了,更多相關(guān)vue3中$refs使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue實(shí)現(xiàn)鼠標(biāo)懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件詳解
在所做的Vue項(xiàng)目中,有時(shí)候需要在鼠標(biāo)移動(dòng)文字框的時(shí)候顯示一些詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)鼠標(biāo)懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue打包優(yōu)化時(shí)配置webpack的8大方案小結(jié)
vue-cli?生成的項(xiàng)目通常集成Webpack?,在打包的時(shí)候,需要webpack來(lái)做一些事情,這里我們希望它可以壓縮代碼體積,提高運(yùn)行效率,本文為大家整理了8大webpack配置方案,希望對(duì)大家有所幫助2024-02-02
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue+element+electron仿微信實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element+electron仿微信實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決
這篇文章主要介紹了Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)手機(jī)驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)驗(yàn)證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue-tree-chart樹形組件的實(shí)現(xiàn)(含鼠標(biāo)右擊事件)
Vue-Tree-Chart,一個(gè)Vue.js2組件，本文就詳細(xì)的介紹一下vue-tree-chart樹形組件的實(shí)現(xiàn)(含鼠標(biāo)右擊事件)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Element?UI?Dialog對(duì)話框改成固定高度超出部分滾動(dòng)條滾動(dòng)
這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對(duì)話框改成固定高度超出部分滾動(dòng)條滾動(dòng)的相關(guān)資料,el-dialog默認(rèn)高度是自由拉伸的,當(dāng)內(nèi)容超過(guò)屏幕時(shí)會(huì)出現(xiàn)滾動(dòng)條,按鈕和標(biāo)題都會(huì)隨著滾動(dòng),用戶體驗(yàn)不好,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue3中的常見組件通信之props和自定義事件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue 自定義提示框(Toast)組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 自定義提示框(Toast)組件的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08