vue子组件如何获取父组件的dom

在Vue中，子组件可以通过特定的方式获取父组件的DOM。以下是一种常见的方法：

1. 使用`$parent`属性：子组件可以通过`this.$parent`访问到其直接父组件的实例。通过这个属性，可以使用常规的DOM操作方法（如querySelector、getElementById等）来获取父组件的DOM元素。

示例代码如下：

// 子组件
mounted() {
  const parentDOM = this.$parent.$el; // 获取父组件的DOM元素
  // 进行相关操作
}

2. 使用`ref`属性：在父组件中，可以给子组件添加一个`ref`属性，然后通过`this.$refs`来访问子组件实例。通过子组件实例，可以获取到子组件的DOM元素。

示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
export default {
  mounted() {
    const childDOM = this.$refs.child.$el; // 获取子组件的DOM元素
    // 进行相关操作
  }
}
</script>

以上是两种常见的方式，可以让Vue子组件获取父组件的DOM元素。需要注意的是，尽量避免直接操作DOM，而是优先使用Vue的数据驱动方式进行开发。