解决this.$refs调用方法为undefined

    在开发中，经常会使用到this.$refs ，用来操作真实的DOM节点，实现父子组件的通信。

    在近期的开发中，遇到了需要根据父组件中的点击事件调用子组件中的方法修改页面数据，在父组件初始化时要调用一次子组件的方法渲染页面，但给子组件绑定好ref属性后，使用this.$refs.XX调用子组件中的方法，显示该方法为undefined。

<PollutionMap ref="pollutionMap" v-if="level" :pointArea="problemData" @initData="initMapData" :problemData="problemData" @toLevel="toLevelFn" ></PollutionMap>

1.  
   this.problemDetailsData = res
2.  
   res.map(item => {
3.  
   this.$refs.pollutionMap.detailAddmarker(item, flag)
4.  
   })

原因：

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

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

解决方法：

      1、使用this.$refs如果要在mouend()中使用，必须要在this.$nextTick(()=>{  } )   这里面实现，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

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

     3、在methods:{  } 方法中使用，也需要使用this.$nextTick(()=>{  } ) 等到页面完全渲染完毕之后在调用即可。

1.  
   this.$nextTick(() => {
2.  
   this.problemDetailsData = res
3.  
   res.map(item => {
4.  
   this.$refs.pollutionMap.detailAddmarker(item, flag)
5.  
   })
6.  
   })

这篇好文章是转载于：学新通技术网