this.$refs.xxx报Cannot read properties of undefined (reading ‘xxx‘)“

最新推荐文章于 2025-03-26 16:38:43 发布

好记性真不如烂笔头

最新推荐文章于 2025-03-26 16:38:43 发布

阅读量1.3w

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46581222/article/details/122379698

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了在Vue中使用$refs访问子组件属性和方法时遇到的TypeError，重点在于解决因组件未加载完成导致的`initfun()`调用错误。通过$nextTick方法推迟执行，确保在Vue实例更新DOM后再调用子组件方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作记录

背景：

父组件在通过this.$refs获取子组件的属性和方法

子组件：
        <alarmareasasd
          v-if="optype == 'fence'"
          ref="setfenceref"
          @callback_fun_choice_area="callback_fun_choice_area"
          @callback_fun_choice_close="callback_fun_choice_close"
          @subevent='faqeven'
        ></alarmareasasd>

//调用：
    handleAdd() {
      this.optype = "fence";
      //initfun()为子组件的方法
      this.$refs.setfenceref.initfun();
    },

报错：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘initfun’)”

解决：

    handleAdd() {
      this.optype = "fence";
      this.$nextTick(()=>{
        this.$refs.setfenceref.initfun();
      })
    },

原因：

vue还没进行加载完子组件的方法的时候就开始进行执行子组件方法就会报这个错误，解决的办法很简单，只要在让方法在vue加载完子组件之后再进行执行

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。