给子组件传递dom元素引用实例方案

在实际开发中有一个比较常见的场景是，父组件写了一个el-form组件。然后里面内容很多，所以拆成了子组件。那么子组件中就有调用父组件的form实例方法的需求。到所以这就涉及一个问题，怎么把父组件的form实例传递给子应用。
这里传递后直接调用是不行的。关键点在于父子组件生命周期渲染顺序。只有mounted会子优先父执行，其他的都是父优先子。然后实例的引用是在mounted加载完成之后才有的。以vue2的生命周期为例：

父子组件的生命周期钩子函数的执行顺序如下：父组件的beforeCreate
父组件的created
父组件的beforeMount
子组件的beforeCreate
子组件的created
子组件的beforeMount
子组件的mounted
父组件的mounted
当子组件被销毁时，生命周期钩子的执行顺序如下：子组件的beforeDestroy
子组件的destroyed
父组件的beforeDestroy
父组件的destroyed

因此解决方案就很明确。父组件分vue2和vue3的方式正常传递引用即可，子组件的话要调用nextTick。这里还涉及一个nextTick的实现原理，有兴趣可以了解一下。

vue2传递实例

<child :ticketFormRef="$refs.ticketFormRef" />

vue3传递实例

<child :ticketFormRef="ticketFormRef" />

子组件调用实例

onMounted(() => {nextTick(() => props.ticketFormRef.clearValidate());  
})