欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue3.0中使用ref获取dom元素

程序员文章站 2022-05-17 21:26:42
...

前言:

       我们在vue2.0中使用ref是比较轻松的,但是3.0的方法是有改动

vue3.0官方入口

目录

vue2.0中:

1、页面上定义:

2、拿dom:

vue3.0中:

1、使用场景-echarts图中用ref获取dom

2、使用场景-初始化直接获取ref的元素

打印结果:


vue2.0中:

1、页面上定义:

<div ref='abc'><div>

2、拿dom:

this.$refs.abc

vue3.0中:

1、使用场景-echarts图中用ref获取dom

<div ref='echart'><div>
import { onMounted,toRefs, ref,reactive } from 'vue';

 setup(){
    //1、定义
    let state = reactive({
      echart: ref(),
    })
     const echartInit = () =>{
        //2、在方法中使用
      var myChart = echarts.init(state.echart);
        ...
    }
    return {
        //3、发送出来
      ...toRefs(state),
    };

}

2、使用场景-初始化直接获取ref的元素

<div ref="box">
   I am div
</div>
import { onMounted, ref} from 'vue';
setup(){
    let box = ref(null)
    //挂载
    onMounted(()=>{
      console.log('box.value', box.value)
    })

    return {
      box
    }
}

打印结果:

vue3.0中使用ref获取dom元素

相关标签: vue3.0 vue3.0 ref