Vue中的ref 和$refs的使用

ref 和$refs

作用:利用ref 和$refs可以用于获取dom元素 ,或组件实例

特点:查找范围→当前组件内(更精确稳定,原生的dom在vue子组件中查找最终也会扫描到父组件)

1. 获取dom

  1. 目标标签--添加ref 属性

    javascript 复制代码
      <div ref="myChart" class="base-chart-box">子组件</div>
  2. 恰当时机,通过this.$refs.xxx,获取目标标签

    javascript 复制代码
     const myChart = echarts.init(this.$refs.myChart)  //获取到dom元素

2.获取组件实例

  1. 目标组件--添加ref属性

    javascript 复制代码
    <BaseForm ref="baseForm"></BaseForm>     <!-- 相当于声明子组件中的方法可以给父组件使用 -->
  2. 恰当时机,通过this.$refs.xxx,获取目标组件,

    就可以调用组件对象里面的方法

    javascript 复制代码
    var res = this.$refs.baseForm.getValues()  //调用子组件中定义的方法
相关推荐
Mapmost1 分钟前
单体化解锁3DGS场景深层交互价值,让3DGS模型真正被用起来!
前端
幻灵尔依29 分钟前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子29 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳31 分钟前
CSS 基础概念
前端·css·css3
前端小巷子31 分钟前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar38 分钟前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫21 小时前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun1 小时前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙1 小时前
React Hooks 详解
前端·javascript
南囝coding1 小时前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端