使用this.$refs调用方法值为为undefined

港控/mmm° 2023-09-26 21:21 97阅读 0赞

--------------------

`提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档`

#### 文章目录 ####

*  一、原因？
 *  二、解决方法
 *   *  1
     *  2
     *  3

--------------------

## 一、原因？ ##

vue 官方中对ref的使用中写道：关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

也就是说也就是说如果在DOM结构中的某个DOM节点使用了v-if、v-shou、v-for（即根据获取到的后台数据来动态操作 DOM，即响应式）、 那么这些DOM事不会在mounted阶段中找到的，ref 只有等页面加载完成好之后才能调用 this.$refs获取子组件中的数据或者方法 。

## 二、解决方法 ##

### 1 ###

使用this. r e f s 如果要在 m o u e n d ( ) 中使用，必须要在 t h i s . refs如果要在mouend()中使用，必须要在this. refs如果要在mouend()中使用，必须要在this.nextTick(()=>\{ \} ) 这里面实现，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

### 2 ###

代码如下（示例）：

可以直接在updata()的生命周期函数中使用，由于mounted阶段是加载阶段，而updata阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)。

### 3 ###

在methods:\{ \} 方法中使用，也需要使用this.$nextTick(()=>\{ \} ) 等到页面完全渲染完毕之后在调用即可。  
代码如下（示例）：

this.$nextTick(() => {
        
    	this.problemDetailsData = res
    	res.map(item => {
        
    	    this.$refs.pollutionMap.detailAddmarker(item, flag)
    	})
    })

--------------------