vue3访问子组件的 DOM 元素的方法总结

在 Vue 3 中，访问子组件的 DOM 元素是一个常见的需求。本文将介绍如何在 Vue 3 中使用不同的方法来获取子组件的 DOM 元素。

方法一

使用ref和refs：在父组件中，可以通过 ref 和 refs 来获取子组件的 DOM 元素。在模板中使用 ref 声明引用变量，并将其绑定到子组件的 ref 属性上。然后，在父组件的钩子函数（如 mounted）中，通过 this.refs 访问子组件的引用，使用 .{refName} 来访问子组件实例的属性和方法。通过 .$el 可以获取子组件的 DOM 元素。

方法二

在 < script setup> 中访问子组件的 DOM 元素：在 Vue 3 中，可以使用 < script setup> 区块和 Composition API 的语法来编写组件逻辑。在父组件的 < script setup> 区块中，可以使用 onMounted 钩子函数来访问子组件的 DOM 元素。使用 ref 创建引用并绑定到子组件的 ref 属性上，然后在 onMounted 钩子函数中使用 childRef.value.$el 来访问子组件的 DOM 元素。

实例演示

但是会出现这种情况：
对于父组件的 mounted 钩子函数，确实表示父组件的模板已经被渲染成真实的 DOM。在大多数情况下，子组件也应该在父组件的 mounted 钩子函数执行时已经被渲染完成。
然而，由于 Vue 的异步渲染策略，某些情况下子组件的 DOM 元素可能仍然未完全渲染。这种情况通常发生在以下情况下：

1. 子组件包含异步操作或延迟加载的内容：如果子组件内部包含异步操作，例如从服务器加载数据或执行动画效果，子组件的 DOM 元素可能需要更长的时间才能完全渲染。
2. 父组件与子组件之间存在过渡效果：如果在父组件中使用了过渡效果（例如 < transition> 或 < transition-group>），那么在父组件的 mounted 钩子函数中访问子组件的 DOM 元素时，可能会遇到过渡效果尚未完成的情况。

在这些情况下，尽管父组件的模板已经被渲染成真实的 DOM，但子组件的 DOM 元素可能尚未完全渲染。因此，在父组件的 mounted 钩子函数中立即访问子组件的 DOM 元素可能会导致获取到不完整或错误的信息。

1. 使用 nextTick( ) 解决异步渲染问题：在某些情况下，子组件的 DOM 元素可能尚未完全渲染，即使在父组件的 mounted 钩子函数中。这是因为 Vue 的异步渲染策略。为了解决这个问题，可以使用 nextTick() 函数，在父组件的 mounted 钩子函数中等待子组件的 DOM 元素渲染完成后再进行操作。通过 nextTick() 函数可以确保获取到正确的子组件 DOM 元素。

方法三

使用setup的情况下这个时候我们无法使用this，注意在setup中setup是封闭的，不会将子组件事件暴露出来，所以要用defineExpose()，将需要在父组件调用的函数暴露出去，子组件代码如下：

父组件代码如下：

这种方法通常不需要考虑异步渲染的问题，是因为在子组件的 defineExpose 中，直接将 DOM 引用暴露给了父组件，而不需要等待异步操作完成。
通过使用 defineExpose 抛出 getDom 函数，在父组件中访问子组件的 DOM 元素。在这种情况下，getDom 函数返回的是 inpRef.value，即子组件的 DOM 元素。
因为这个引用是直接通过 ref 创建的，并在子组件的 defineExpose 中暴露给父组件，所以不需要考虑异步渲染的问题。当父组件的 mounted 钩子函数执行时，子组件的 defineExpose 已经完成，并且可以直接访问子组件的 DOM 元素。
所以，通过在子组件中抛出 DOM 的方式，可以直接在父组件中访问子组件的 DOM 元素，而不需要考虑异步渲染的延迟问题。也就无需加nextTick().

通过上述方法，可以在 Vue 3 中轻松地访问子组件的 DOM 元素。这对于执行诸如测量元素大小、计算位置、添加样式等操作非常有用。