vue中ref的用法小结

 更新时间:2023年11月16日 15:44:40   作者:小锅盖快跑  
在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,在这里给大家分享vue中ref的用法,感兴趣的朋友一起看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

vue中ref的用法

在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下.

1.绑定在dom元素上时,用起来与id差不多,通过this.$refs来调用:

1
2
<div id="passCarEchart" ref="passCarEchart" style="height: 300px; width: 100%"></div>
console.log(this.$refs.passCarEchart)

看到打印出来就是绑定的dom对象,可以用来执行一些dom操作,比如操作样式,获取属性等:

1
2
3
4
let passCarEchart= this.$refs.passCarEchart
passCarEchart.style.height = '200px'
passCarEchart.style.background = 'red'
console.log(passCarEchart.clientHeight)

2.如果refs自身的dom,或父级的dom是通过v-for渲染出来的,vue框架就会把refInFor设置成true,然后ref.key在registerRef函数就被设置成数组

1
2
3
4
5
6
7
8
<div
 v-for="item in csGroupNameArr"
  :key="item"
>
 <div ref="arrayDiv">
    {{ item }}
  </div>
</div>
1
2
3
this.$nextTick(() => {
     console.log(this.$refs.arrayDiv,'arrayDiv')
   })

3.ref除了这两个用法,还有另一种用法,绑定在组件标签上:

1
2
3
4
5
<CheckPoint
        ref="checkPoint"
        v-model="checkPointNumbers"
        @clearData="clearCheckPointData"
      ></CheckPoint>
1
console.log(this.$refs.checkPoint)

可以看到这次和我们之前绑定在dom元素上有很大的不同,这次获取到的是一个VueComponent对象,里面有这个组件的各个属性,这些属性里面有一个$el,这就是dom对象,就是和我们直接绑定在dom元素上获取的一样:

1
console.log(this.$refs.checkPoint.$el)

通过$refs获取的对象中,我们可以看到里面还有我们设置在data里面的变量,我们是可以直接通过这种ref的方式去修改,它就等于拿到那个组件的this,可以直接调用,不仅是data里面的变量,还有methods里面的方法.

4.这种用法还可以在用ui框架的组件的时候,ui框架给我们提供了很多组件的方法,就是要通过这个ref去调用,比如说element-ui的树形组件

例子:

1
<el-form ref="personDialogForm" :inline="true" class="dialog-form" :model="form" :rules="dialogRules">

这里就不多介绍用法了,一般组件库官网中各自的用法.

到此这篇关于vue中ref的用法的文章就介绍到这了,更多相关vue ref用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/weixin_46995731/article/details/134423611

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Vue3源码分析侦听器watch的实现原理

    Vue3源码分析侦听器watch的实现原理

    watch 的本质就是观测一个响应式数据,当数据发生变化时通知并执行相应的回调函数。watch的实现利用了effect 和 options.scheduler 选项,这篇文章主要介绍了Vue3源码分析侦听器watch的实现原理,需要的朋友可以参考下
    2022-08-08
  • vue3.0安装Element ui及矢量图使用方式

    vue3.0安装Element ui及矢量图使用方式

    这篇文章主要介绍了vue3.0安装Element ui及矢量图使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • vue开发自定义的全局公共组件详解

    vue开发自定义的全局公共组件详解

    本文介绍了如何开发自定义全局公共组件的两种方法,第一种方法是通过在components文件夹中创建新的组件文件夹,例如Loading文件夹,并在其中创建index.js和index.vue文件,通过在vue的入口文件main.js中进行引入,可以实现组件的全局调用
    2024-10-10
  • vue项目页面嵌入代码块vue-prism-editor的实现

    vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • vue template当中style背景设置不编译问题

    vue template当中style背景设置不编译问题

    这篇文章主要介绍了vue template当中style背景设置不编译问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3中ref和reactive的用法和解析(推荐)

    vue3中ref和reactive的用法和解析(推荐)

    这篇文章主要介绍了vue3的ref和reactive的用法和解析,开始部分讲解了ref,reactive的使用实例,如何进行类型的标注,配合ts这么使用,接着讲解了两者的区别,分别需要注意的点,还有ref的顶层自动解包,需要的朋友可以参考下
    2023-03-03
  • vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决

    vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决

    在 Vue 中使用 ECharts 组件时,遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因,所以本文给大家介绍了vue中使用echarts刷新可以正常渲染但路由跳转不显示问题的解决方法,需要的朋友可以参考下
    2024-02-02
  • Vue 收集表单数据方法详情

    Vue 收集表单数据方法详情

    这篇文章主要介绍了Vue 收集表单数据方法详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-05-05
  • vue中的rem如何配置

    vue中的rem如何配置

    这篇文章主要介绍了vue中的rem如何配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue中报错Duplicate keys detected:'1'. This may cause an update error的解决方法

    vue中报错Duplicate keys detected:'1'. This may c

    我们在vue开发过程中常会遇到一些错误,这篇文章主要给大家介绍了关于vue中报错Duplicate keys detected:‘1‘. This may cause an update error的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03

最新评论