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()  //调用子组件中定义的方法
相关推荐
我叫汪枫3 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
百思可瑞教育4 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋7 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊7 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A8 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理8 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人9 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥309 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董9 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon9 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs