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

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)文章

最新評論