在vue3中获取dom,有几点需要注意:
1,获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null
2,在setup中,使用ref(null)获取dom
3,不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted
4,代码如下,
<template>
<div ref="main" style="width:300px;height:300px">123</div>
</template>
<script>
import * as echarts from 'echarts'
import { ref,onMounted,} from 'vue'
export default {
setup(){
const main = ref(null);
console.log(main.value);//null
onMounted(()=>{
console.log(main.value);//div
var myChart = echarts.init(main.value);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
myChart.setOption(option)
});
return{
main
}
}
}
</script>