“TypeError: _this.$refs.activity.openDialog is not a function“。父组件ref调用子组件

在Vue.js开发中遇到错误'TypeError: this.$refs.activity.openDialog is not a function',本文记录了解决这个问题的排查过程。首先检查组件引用是否正确,然后确保方法定义位置,如需在mounted后调用,需使用Vue.nextTick或watch。还需确认ref是否为数组,并确保不是在循环中创建。最后,避免在模板中直接给子组件的ref赋值,改为使用ref属性。
摘要由CSDN通过智能技术生成

记录

TypeError: this.$refs.activity.openDialog is not a function"。父组件ref调用子组件的坑。

报错的时候,
首先查找,子组件引入进来是否注册
其次查找子组件是否写在根目录,div包裹。
再查找,这个方法是写在哪里。如果在created里,是被报错的,要写在mounted中,此时dom已加载好。如果写在methods中,需要用。this.$nextTick()回掉,或者用定时器 setTimeout(()=>{ },500)
还要检查是否循环了,如果是循环也会报错。
在打印一下console.log(this.$refs.activity); 是什么数据格式。如果是个数组就 this.$refs.activity[0].openDialog()
还要检查一个坑,是我找了好久才发现的,不要图省事给方法名字随便起,当我把openDialog改成了 open。。报错解决了。

父组件

 			<el-table-column label="操作">
              <template slot-scope="scope">
                <div class="<
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值