Vue 如何实现获取 dom 元素（父组件获取子组件的dom / ref），真的很详细

在Vue中，父组件可以通过几种方式获取子组件的DOM元素：

1. 使用ref属性：

   在父组件中，可以给子组件添加ref属性。然后通过this.$refs.refName来访问子组件实例或DOM元素。

子组件：

<template>
  <div>
    <!-- 给子组件添加ref属性 -->
    <child-component ref="myChild"></child-component>
  </div>
</template>

父组件：

<script>
export default {
  mounted() {
    // 通过ref访问子组件实例
    const childComponentInstance = this.$refs.myChild;
 
    // 如果需要获取DOM元素，可以访问子组件实例的$el属性
    const childDomElement = this.$refs.myChild.$el;
  }
}
</script>

2. 使用$children属性：

   父组件可以通过this.$children数组访问子组件实例。然后可以访问这些实例的$el属性来获取对应的DOM元素。

父组件：

<script>
export default {
  mounted() {
    // 通过$children访问子组件实例
    const childComponentInstance = this.$children[0];
 
    // 获取子组件的DOM元素
    const childDomElement = childComponentInstance.$el;
  }
}
</script>

注意：ref是官方推荐的方式来访问组件或DOM元素，因为它提供了一个稳定的接口，不受组件层级结构变化的影响。而$children访问子组件实例时，需要确保子组件是直接挂载在父组件下的第一个子组件，因为$children的顺序是按照组件挂载的顺序来的。