vue3中$refs的基本使用方法
1、在vue2中可以通過this來訪問到$refs,vue3中由于沒有this所以獲取不到了,但是官網(wǎng)中提供了方法來獲取
知道了怎么獲取后,我們結合ElementPlus來使用,因為項目中用到了ElementPlus的表單驗證,官網(wǎng)也是醉了,還寫的是vue2的寫法
話不多說,上代碼
由于我得form表單外面包了一層el-dialog
,是不能在onMounted中獲取到$refs的,應該在觸發(fā)對應事件,讓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
在控制臺輸出一下這個方法就能看到
總結
到此這篇關于vue3中$refs的基本使用方法的文章就介紹到這了,更多相關vue3中$refs使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue中如何使用唯一標識uuid(uuid.v1()-時間戳、uuid.v4()-隨機數(shù))
這篇文章主要給大家介紹了關于vue中如何使用唯一標識uuid(uuid.v1()-時間戳、uuid.v4()-隨機數(shù))的相關資料,當使用Vue.js生成UUID時,我們可以使用uuid庫來幫助我們生成通用唯一標識符(UUID),需要的朋友可以參考下2023-12-12用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果
這篇文章主要介紹了用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04詳解auto-vue-file:一個自動創(chuàng)建vue組件的包
這篇文章主要介紹了auto-vue-file:一個自動創(chuàng)建vue組件的包,需要的朋友可以參考下2019-04-04vue項目優(yōu)雅實現(xiàn)自動引入組件的方法詳解
在我們寫vue項目的時候,都會引入一些組件庫,有時候有可能還不止一個組件庫,那么如何優(yōu)雅的實現(xiàn)自動引入組件呢,下面小編就來和大家詳細講講吧2023-09-09