ref 和 $refs 获取dom元素或者组件实例

也就是获取当前组件 dom元素

BaseChart.vue

javascript 复制代码
<template>
  <div ref='mychart' class="base-chart-box"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted(){
    // 基于准备好的dom,初始化echarts实例
    const myChart = echarts.init(this.$refs.mychart)

    //指定图表的配置和数据
    const option = {

    }
    //使用刚指定的配置项和数据显示图表 
    myChart.setOption(option)
  }

}
</script>

<style>

</style>

App.vue

javascript 复制代码
<template>
  <div calss="app">
    <BaseChart></BaseChart>
  </div>
</template>

<script>
import BaseChart from './components/BaseChart.vue'
export default {
  data() {
    return {

    }
  },
  components:{
    BaseChart,
  }

}
</script>

<style>

</style>

获取组件实例

子组件中用v-model将account和password进行双向数据绑定,只要在页面输入框中输入数据,account和password就能获取到数据。

但是父组件是不能获取到这两个数据的,当然也不能重置这两个数据。

这时就需要父组件中获取到子组件,通过在父组件的子组件标签中添加属性ref='baseForm',然后this.$refs.baseForm获取整个子组件,继而调用子组件的方法getValues()和resetValus()方法,进行获取和重置子数据。整个调用是通过点击按钮(添加点击事件),通过函数处理调用的。

整个本质其实仅仅是父组件调用子组件函数,通过ref和$refs实现

相关推荐
周小码15 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v15 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山15 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin16 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip16 小时前
结合Worker通知应用更新
前端·javascript
叶玳言16 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳16 小时前
HTML 基本结构
前端
Gazer_S16 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
蔗理苦16 小时前
2025-09-04 HTML1——环境配置与简介
css·vscode·html
一只小阿乐16 小时前
Html重绘和重排
前端·html