Vue2 ref和$refs获取dom和组件

最新推荐文章于 2025-06-16 15:03:03 发布

原创

最新推荐文章于 2025-06-16 15:03:03 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

一、获取dom

1、图示

2、App.vue

<template>
  <div class="app">
    <div class="base-chart-box">
      这是一个捣乱的盒子
    </div>
    <BaseChart></BaseChart>
  </div>
</template>

<script>
import BaseChart from './components/BaseChart.vue'
export default {
  components:{
    BaseChart
  }
}
</script>

<style>
.base-chart-box {
  width: 200px;
  height: 100px;
}
</style>

3、BaseChart.vue

<template>
  <div ref='baseBox' class="base-chart-box">子组件</div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echa