Vue3获取v-if中的ref

在v-if中当为false时,此时dom未被渲染,无法获取到该元素

<div ref="myref" v-if="flag">div>
setup(){
const flag = ref(false)
const myref = ref(null)
console.log(myref.value)//null
	return {
		flag,
		myref
	}
}

将变量改为true,在nextTick中就能拿到了

<div ref="myref" v-if="flag">div>
setup(){
const flag = ref(false)
const myref = ref(null)
flag.value = true
nextTick(()=>{
      console.log(myref.value)//
}) return { flag, myref } }

在element-plus中,Dialog也是使用的v-if,获取Dialog中的ref时 ,ref以回调的方式赋值
注意@open之后的事件中dom才被渲染,这里我在@close中获取

<el-dialog @close="resetform()">
	<el-form
	   :ref="(el)=>userformref = el"
	>el-form>
el-dialog>
function resetform(){
    userformref.value.clearValidate()
}

你可能感兴趣的:(vue.js,vue)