Vue3 nextTick() tutorial

nextTick()

简单定义:等待下一次 DOM 更新刷新的工具方法

type:

function nextTick(callback?: () => void): Promise<void>

Example application scenarios

Requirement: A form is submitted, and a method is defined in parent component 2 to verify the form in parent component 1. Idea
: Parent component 2 needs to get the form in parent component 1
insert image description here

insert image description here
Method:
1. Apply nextTick() in parent component 1, get ref, and save it in vuex

insert image description here

//将<a-form>中ref传给form组件用于validate验证
nextTick(() => {
    
    
  store.commit('HardwareStore/UPDATE_REFS', formRef.value)
})

2. In the parent component 2, get the passed ref through vuex, and then verify it through validate()

 formRef.value.validate().then(()=>{
    
    })

3. You're done

Guess you like

Origin blog.csdn.net/m0_46627407/article/details/126493067