Vue2.X升级成vue3.X 后如何获取DOM节点

嗷呜su

于 2021-04-26 15:34:36 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43860703/article/details/116157078

本文详细介绍了在Vue3.x中如何通过ref获取DOM元素，包括两种方法：一是直接在模板中给元素添加ref属性并在setup中引用；二是利用getCurrentInstance获取当前实例并访问DOM。这两种方法都是在组件挂载后初始化图表或进行其他DOM操作的关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写自定义目录标题

vue3.x中使用ref获取dom

方法一

在标签中增加ref属性

<div id="myChart" ref="myChart"></div>

在setup中引用

setup(props) {
    let myChart = ref(null);
    const state = reactive({
      chart:null,
      myChart
    });
    

    onMounted(() => {
      state.chart = echarts.init(myChart.value);
    })
    return toRefs(state);
  }

方法二

*** 导入 getCurrentInstance

import { getCurrentInstance, onMounted, reactive,  toRefs } from 'vue';
export default {
  setup() {
    const {ctx} = getCurrentInstance();
  
    onMounted(()=>{
		// 当前dom节点
    	const _this = ctx.$el;
	})
    }