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