vue父组件获取子组件 dom元素

在Vue中，父组件可以通过使用`$refs`引用子组件并访问其DOM元素。你可以给子组件添加一个`ref`属性，然后在父组件中使用`$refs`来获取子组件的引用，进而访问其DOM元素。

下面是一个示例，展示如何在父组件中获取子组件的DOM元素：

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 在mounted生命周期钩子中获取子组件的DOM元素
    const childElement = this.$refs.childRef.$el;
    console.log(childElement);
  }
}
</script>

在上面的代码中，我们首先在父组件的模板中使用`<child-component>`标签添加子组件，并给它添加了`ref`属性。然后在父组件的`mounted`生命周期钩子中，我们使用`this.$refs.childRef`来获取子组件的引用，再通过`.el`访问其DOM元素。

相关问题

vue子组件获取父组件的dom

在Vue中，子组件获取父组件的DOM元素是一个不常见的需求。通常情况下，父组件应该将需要传递给子组件的数据通过props传递给子组件，而不是让子组件直接访问父组件的DOM元素。如果确实需要在子组件中访问父组件的DOM元素，可以使用$parent属性来访问父组件实例，然后通过父组件实例的$el属性来获取DOM元素。但是需要注意的是，这种做法不太推荐，因为它破坏了组件的封装性，使得子组件与父组件之间产生了耦合。