解决this.$refs.xxx 取值为undefined问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决this.$refs.xxx 取值为undefined问题相关的知识,希望对你有一定的参考价值。

参考技术A

问题场景是这样,
我们设定一个组件的ref = ‘a’,根据生命周期,我们是可以在mounted中访问的,但是 console.log(this.$refs.a) 是undefined,而我们 this.$refs 打印出来,这个a是存在的,这是为什么呢?

可能你还没有注意到,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。
具体查看官方文档的 异步更新队列

因为我的使用场景这个 a 组件是条件渲染的,所以我们首先一定要在满足这个条件的时候调用,其次,我们也应该做一下异步处理,vue给我们提供了 vue.$nextTick() 这个API,官方给的解释是

所以这里我采用了异步函数async/await

或者回调

RN state的几种取值方法

对于RN中的state的取值大家都不陌生,现在小记下几种方法

假设state中有data数组

state = 
        data: [],
    ;

取值时使用时有以下几种取法

                               // 1、
                                // this.state.data;
                                // 2、
                                // constdata = this.state
                                // 3、
                                const data = this.state.data
                                // 4、指定为自己喜欢的名称
                                // let oData: any = this.state.data;
                                // 5、
                                // constdata:oData = this.state;

 

以上是关于解决this.$refs.xxx 取值为undefined问题的主要内容,如果未能解决你的问题,请参考以下文章

Vue mounted中使用$refs出现undefined的解决方法

在Vue中使用JSX语法

vue操作dom

React Refs的多种用法归纳整理

vue组件获取和vue-cli的基本了解

vue组件获取和vue-cli的基本了解