给子组件传递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());
})