Vue 解决通过this.$refs来获取DOM或者组件报错问题

1.关于this.$refs的使用场景

如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素

<p ref="p">hello</p>

<!-- this.$refs.p 指向该DOM元素 -->

如果ref属性加在组件上，那么this.$refs.name指向该组件实例

<child-component ref="child"></child-component>

<!-- this.$refs.child 指向该组件 -->

2.为什么有时候通过this.$refs.name来获取会报错？

一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来获取内容就会出现xxx is undefined的错误

因为ref本身是作为渲染结果被创建的，在渲染的时候是不能访问的，因为他们还不存在！

如果此时代码是需要这样来写代码，那么你可以在DOM渲染完毕后再进行获取

this.$nextTick(() => {
 this.$refs.name... //DOM渲染完毕后就能正常获取了
})

补充知识：vue ref用法（this.$refs获取为空）

//6.14更新

但是有个办法，我们可以使用

this.$nextTick(() => {
  // todo
})

setTimeout(() => {
  // todo
}, 0)

来得到数据

ref

本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的

$refs不是响应式的，只在组件渲染完成后才填充

用于元素或子组件注册引用信息，注册完成，将会注册在父组件$refs对象上

如果你获取到的总是空的，你注意一下：

1、你在哪里调用，和你调用的对象

试试在mounted（）里面调用有效果没有

调用的对象是本来就存在的，还是需要数据渲染之后才会出现的，同理，在mounted（）里面调用看看

2、调用对象是不是数组列表

我一开始设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的，

后来才发现，this.$refs.name是一个数组，无法通过 .style 获取样式，

只能遍历这个this.$refs.name数组，在this.$refs.name[index]上设置样式

// 6.14 更新，这个说法有点问题

但是像高度宽度，可以通过offsetHeight，等来获取。

3、调用对象是否和v-if结合使用

ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

最后

在使用中，我发现$refs.style只能设置该对象的样式，获取出来的值都是空的

以上这篇Vue 解决通过this.$refs来获取DOM或者组件报错问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue里碰到 $refs 的问题的方法

    解决vue里碰到 $refs 的问题的方法

    本篇文章介绍了vue里碰到 $refs 的问题,分享给大家,希望能帮助大家解决问题 记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域的高度,以此来判断对底部按钮显示的位置,但是在ref的时候,就是获取不到该标签,在mounted钩子函数里打印 this.$refs,也能看到这个值,但就就是点不出来(this.$refs这个对象里这个值,但是就是获

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • Vue组件跨层级获取组件操作

    this.$parent 访问父实例 this.$children 当前实例的直接子组件.(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 this.$children.$children.$refs.xxx 跨级访问子组件 这种递归的方式 代码繁琐 性能低效 ref 只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给元素或子组件注册引用信息. 引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使

  • vue中使用refs定位dom出现undefined的解决方法

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • Vue 解决通过this.$refs来获取DOM或者组件报错问题

    1.关于this.$refs的使用场景 如果ref属性加在普通元素上,那么this.$refs.name则指向该DOM元素 <p ref="p">hello</p> <!-- this.$refs.p 指向该DOM元素 --> 如果ref属性加在组件上,那么this.$refs.name指向该组件实例 <child-component ref="child"></child-component> <!

  • 解决selenium模块利用performance获取network日志请求报错的问题(亲测有效)

    目录 报错翻译 报错原因 解决方法 已解决selenium模块利用performance获取network日志请求,抛出异常selenium.common.exceptions.InvalidArgumentException: Message: invalid argument: log type ‘performance’ not found 报错问题 一个小伙伴遇到问题跑来私信我,想用selenium模块利用performance获取network日志请求,但是发生了报错(当时他心里瞬间凉

  • 解决vue props传Array/Object类型值,子组件报错的情况

    问题: Props with type Object/Array must use a factory function to return the default value. 1.在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候 2.如果子组件的props接收default为 ,如下 报错 原因:props default 数组/对象的默认值应当由一个工厂函数返回 解决: 补充知识:vue的props如何传多个参数 vue父作用域将数据传到子组件通过pro

  • 关于获取DIV内部内容报错的原因分析及解决办法

    关于获取DIV内部内容报错的原因分析及解决办法

    1.错误描述 2.错误原因 由于向div中添加元素,利用append(); $("#divStyle").append("<div><label>_data[i].name</label></div>"); append里面是动态数据,当请求数据为空时,获取并判断div中的内容: var divContent = $("#divStyle").html(); if(divContent == nul

  • vue 解决循环引用组件报错的问题

    做项目时遇到使用循环组件,因为模式一样,只有数据不一样.但是按照普通的组件调用格式来做时报错,错误信息为Unknown custom element: <pop> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 查询了官方文档,还有其他的资料,发现是循环调用组件时,组件比vue实例后创建,官方文档里写组件

  • 解决vue 引入子组件报错的问题

    错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de

  • vue如何解决循环引用组件报错的问题

    问题由来 最近在做项目的时候遇到使用循环组件,因为模式一样,只有数据不一样.按照普通组件调用格式来做的时候总是报错,错误信息为[Vue warn]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 解决方案 查询了网上各种资料之后,发现是

  • 解决vue 使用axios.all()方法发起多个请求控制台报错的问题

    今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错,后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上,需要我们手动去添加 == 只需要在你封装的axios文件里加入 == instance.all = axios.all 就完美解决了! 补充知识:vue项目中使用axios.all处理并发请求报_util2.default.axios.all is not a function异常 报错: _util2.default.axios.

  • 解决springboot 多线程使用MultipartFile读取excel文件内容报错问题

    springboot项目开启多线程 启动类加注解开启 @EnableAsync,实现类方法加注解 @Async 前端页面 报错信息 java.io.FileNotFoundException: C:\Users\dongao\AppData\Local\Temp\tomcat.1255209411477782290.8051\work\Tomcat\localhost\ROOT\upload_7d7b99e5_38da_4a03_93e0_bff20cb48022_00000000.tmp (系

  • 解决tensorflow1.x版本加载saver.restore目录报错的问题

    这个错误是最新的错误哈,目前只在tensorflow上的github仓库上面有提出,所以你在百度上面找不到. 是个tensorflow的bug十天前提出的,只有github仓库上一个地方有提出. NotFoundError (see above for traceback): Unsuccessful TensorSliceReader constructor: Failed to find any matching files for xxx Traceback (most recent ca

随机推荐