vue3子组件怎么获取父组件的DOM

在 Vue 3 中，子组件可以通过特殊的属性 `$parent` 来访问其父组件的实例。通过 `$parent` 属性，你可以获取到父组件的实例，然后可以使用普通的 JavaScript/DOM API 来获取父组件的 DOM 元素。

以下是一个示例，展示了如何在 Vue 3 中获取父组件的 DOM 元素：

<template>
  <div>
    <h2>Child Component</h2>
    <button @click="getParentDOM">Get Parent DOM</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParentDOM() {
      const parentDOM = this.$parent.$el;
      console.log(parentDOM); // 输出父组件的 DOM 元素
    }
  }
};
</script>

在子组件中，通过 `this.$parent.$el` 可以获取到父组件的根 DOM 元素。在上述示例中，我们在 `getParentDOM` 方法中使用 `this.$parent.$el` 来获取父组件的 DOM 元素，并将其打印到控制台。

需要注意的是，使用 `$parent` 属性来获取父组件的 DOM 元素可能会增加组件之间的耦合性，并且在某些场景下可能会导致不可预测的行为。因此，在使用时请谨慎考虑是否真正需要直接访问父组件的 DOM 元素，是否可以通过其他方式来达到你的需求。