vue.js 2.0 关于ref--绑定dom对象并获取

最新推荐文章于 2024-08-30 18:20:09 发布

原创最新推荐文章于 2024-08-30 18:20:09 发布 · 9.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue-js-2-0 #el-ref

本文介绍了在Vue中使用ref属性绑定DOM元素的方法，并分享了一个常见错误：在ref中使用破折号（-）会导致JavaScript无法正确识别的问题及解决办法。

v-ref、v-el 弃用统一使用ref属性为元素或组件添加标记，然后通过this.$refs获取。
开始我用:

<div class="menu-wrapper" ref="menu-wrapper"> 来绑定dom对象，然而浏览器报错vue.esm.js?65d7:434 [Vue warn]: Error in nextTick: “TypeError: Cannot read property ‘children’ of undefined”，在经过多次修改后，发现

<div class="menu-wrapper" ref="menuWrapper"> 将ref里“-”去掉，就不会报错了，应该是修改了命名规则吧。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wcq_work1995

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue - 动态绑定ref(使用变量)以及获取方式，解决v-for循环嵌套自定义子组件时无法this.$refs.xx找到动态组件的情况（详细示例教程）适合 vue.js nuxt.js uniapp

高级前端工程师

02-21

7313

vue把组件ref设为动态,然后用refs再找到，vue 动态赋值ref，vue同一个子组件循环出来如何使用，vue将子组件设置动态ref后，怎么 $ refs调用呢，vue怎么把组件ref设置成动态不唯一的，vue怎么把子组件改为独立的，多个地方调用互不影响，vue同一个子组件，被v-for循环后各自独立互不影响，vue - v-for 循环渲染多个 “重复” 子组件（仅 ref 不同，this. $ refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立” 的

vue3中使用ref动态绑定组件

qq_42931285的博客

07-02

1294

vue3中使用ref动态绑定组件

参与评论您还未登录，请先登录后发表或查看评论

vue中的ref和$refs的使用

01-21

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。 ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点普通的DOM元素上使用 <input type=textref=TEXT/ > <button @click=add>

Vue中动态绑定Ref（两种方式）

weixin_45935553的博客

07-09

6035

项目中ref绑定是常用的操作，那么如何实现动态绑定ref并实现动态获取呢？动态绑定的进阶写法又该如何使用？动态绑定Ref时重复存储Ref问题如何解决？用户动态创建多个空白表单，提交时需要获取当前所有表单数据该如何操作？

vue中使用v-for动态的绑定ref

m0_68937827的博客

10-11

2122

动态绑定ref

Vue.js 2.0：中文版数据驱动Web界面框架参考手册

Vue.js 2.0 是一个流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue.js的设计理念是通过数据驱动的视图来简化前端开发。它采用虚拟DOM技术，通过声明式渲染来提高性能和开发效率。Vue.js支持单文件组件的...

vue.js 1.x与2.0中js实时监听input值的变化

10-20

总之，无论是Vue.js 1.x还是Vue.js 2.0，通过合理使用v-model、ref、v-el、v-ref以及watch，开发者都能够实现对input元素值变化的有效监听，并在数据变化时作出响应。在选择使用2.0中的ref还是1.x中的v-el时，需要...

Vue.js 2.0自定义指令全解析：深入理解并应用

[Vue.js 2.0自定义指令全解析：深入理解并应用](https://vueschool.io/storage/media/3f8117de3ac9eb78114e2a8324025cdd/Custom-Vue-3-Directives_not-transparent.jpg) # 摘要本文深入探讨了Vue.js 2.0中自定义...

Vue.js 2.0与WebSocket实时通信实战指南

随着前端技术的快速发展，Vue.js 2.0已经成为构建动态网页应用的热门框架之一。WebSocket提供了一种在客户端和服务器之间建立持久连接的手段，使数据实时通信成为可能。本文详细探讨了Vue.js 2.0与WebSocket的集成...

Vue(六) render函数、Vue.config.js配置文件，ref属性，props配置项、mixin混入、插件、scoped

最新发布

lxh的博客

08-30

1640

reder函数、Vue.config.js配置文件、ref属性、props配置项、mixin混入、Vue插件、scoped样式

Vue.js框架--双向数据绑定,用ref获取dom节点（四）

分享我的点点滴滴，在成长路上与你同行！

08-29

857

主要操作技能：双向数据绑定 mvvm: model view view model ref获得dom节点: ref="username" ==>显示数据this.$refs.username.value 编写代码: <template> <div id="app"> <h2>{{msg}}</h2>&am

vue中的v-for和ref

weixin_46353030的博客

08-01

3771

方式：使用vue中的ref获取DOM元素在html标签内使用ref和id <div ref="verify" id="verify"> 这是要被修改的DOM元素，把字体改成18px </div> 在vue中获取DOM元素 export default { mounted(){ //打印id=verify的元素 console.log(this.$refs.verify) //将id=verify的字体改为18px this.$refs.verify.s

VUEJS 2.0 下ref -- 绑定demo对象并获取他

还想做MAD

04-09

5950

vue2.0 相比 1.0 改动了 ref / els 这个玩意，虽然接触最开始的就是2.0，教程是1.0的，导致els用不了。。。而2.0要用就得用 ref<div class="menu-wrapper" ref="menu-wrapper"><ul><li class="menu-item"><span class="text&qu

vue3组件ref属性用法，动态绑定ref

hongkid的专栏

05-14

3321

其实ref属性可以是个函数，(el)=>{},这样想怎样存储ref就可以怎样存储。注：el是就是vue实例，赋值后访问的时候无需xx.value。如果我们需要在代码里面动态绑定ref，如果处理？

vue 动态ref绑定方法

qq_64211393的博客

07-07

2156

vue3动态组件ref 绑定方式。vue2 动态ref绑定方式。

vue中ref的动态绑定与获取

djh052900的博客

03-24

4886

在v-for循环中绑定ref,使用时获取某个具体的dom

vue v-for 中使用ref

m0_49494051的博客

01-05

1757

官方文档有说，不可以方法如下循环中的子组件ref 写固定值当你打印ref时,得到一个数组利用索引对子组件进行操作子组件 <Audio-User ref="list1_21Ref" @pauseOther="pauseOther('list1_21Ref', i)"></Audio-User> <el-form-item label="" class="alcohol" :prop="ele.param"

VUE-使用v-for为每一项动态添加ref