vue子组件获取dom元素的方法

在Vue中，子组件获取DOM元素的方法有几种。一种是通过在子组件的模板中使用`:ref`指令来给DOM元素添加一个引用，然后在父组件中可以通过`$refs`来访问这个引用。例如，可以在子组件的模板中使用`:ref`指令来给一个div元素添加引用：

<template>
  <div ref="myDiv">这是一个div元素</div>
</template>

然后在父组件中，可以通过`this.$refs`来访问这个引用：

mounted() {
  console.log(this.$refs.myDiv);
}

另一种方法是通过在子组件的`mounted`钩子函数中使用`this.$el`来获取子组件的根DOM元素。例如：

mounted() {
  console.log(this.$el);
}

这样就可以获取到子组件的根DOM元素了。注意，这种方法只能在子组件的`mounted`钩子函数中使用，因为只有在组件挂载到DOM树上之后，才能获取到DOM元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue.js实例学习：获取DOM元素](https://blog.csdn.net/b954960630/article/details/87739962)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue3中操作dom的四种方式，建议收藏！！！](https://blog.csdn.net/qq_44880095/article/details/128721041)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]