vue 获取组件dom对象（vue中获取dom）

在Vue中，可以通过`ref`属性来获取组件的DOM对象。`ref`属性可以在组件中的任意元素上添加，并且可以通过`this.$refs`来访问这个属性。

首先，在组件中的模板中添加`ref`属性：

```vue

<template>

<div ref="myComponent">Hello World</div>

</template>

```

然后，在组件的方法中可以通过`this.$refs`来访问这个属性：

```vue

<script>

export default {

mounted() {

const domElement = this.$refs.myComponent;

console.log(domElement); // 输出DOM对象

}

}

</script>

```

在`mounted`钩子函数中，可以通过`this.$refs.myComponent`来获取到组件的DOM对象，并将其赋值给`domElement`变量。然后，可以使用`console.log`来输出这个DOM对象。

`mounted`钩子函数是在组件挂载到DOM后调用的，所以在这个钩子函数中可以获取到组件的DOM对象。

另外，如果组件是通过`v-for`指令动态渲染的多个组件，可以给每个组件添加不同的`ref`属性，然后通过`this.$refs`来访问这些属性。例如：

```vue

<template>

<div v-for="item in list" :key="item.id" :ref="`myComponent-${item.id}`">{{ item.name }}</div>

</template>

```

```vue

<script>

export default {

mounted() {

const domElement1 = this.$refs['myComponent-1'];

const domElement2 = this.$refs['myComponent-2'];

console.log(domElement1); // 输出DOM对象

console.log(domElement2); // 输出DOM对象

}

}

</script>

```

在这个例子中，通过`v-for`指令动态渲染了多个组件，并给每个组件添加了不同的`ref`属性。然后，在`mounted`钩子函数中可以通过`this.$refs['myComponent-1']`和`this.$refs['myComponent-2']`来分别获取到这两个组件的DOM对象。