vue3.0中使用ref获取dom元素
程序员文章站
2022-05-17 21:26:42
...
前言:
我们在vue2.0中使用ref是比较轻松的,但是3.0的方法是有改动
vue3.0官方入口
目录:
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刷新当前组件nextTick