欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中$refs的基本使用方法

 更新時間:2022年03月31日 14:41:32   作者:一個什么都不會的前端  
在Vue中一般很少會用到直接操作DOM,但不可避免有時候需要用到,這時我們可以通過ref和$refs這兩個來實現(xiàn),下面這篇文章主要給大家介紹了關于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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論