宜搭父组件调用子组件方法时一直报错undefined

雨诺酱~ 提问于 2026-02-19 11:24:38 阅读 58

框架

在宜搭开发时遇到个问题，父组件想通过ref调用子组件的方法，但一直提示方法不存在。比如我在子组件定义了一个updateData方法，父组件用this.$refs.child.updateData()调用就报错：


<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  methods: {
    triggerUpdate() {
      this.$refs.child.updateData(); // 报错：Cannot read property 'updateData' of undefined
    }
  }
}
</script>

子组件确实有这个方法，也设置了暴露方法，但控制台显示this.$refs.child是undefined。试过用nextTick包裹还是不行，是不是宜搭的组件引用方式和普通Vue不同？

我来解答赞 8 收藏

反馈

2 条解答

司徒斯羽 Lv1

试试看是不是宜搭的组件没正确挂载到ref上，宜搭里子组件得用is属性声明，而且ref要加在组件标签上，不是用自定义标签直接写，改成这样试试：

<component :is="childComponentName" ref="child"></component>

或者确认下子组件有没有被动态渲染、条件渲染，如果子组件在v-if里，ref就拿不到，得等它渲染完再调，用$nextTick包一下：

this.$nextTick(() => {

  this.$refs.child?.updateData?.()

})

2026-02-26 20:04

茜茜 Dev Lv1

宜搭的组件引用确实和原生Vue有区别，需要用this.$refs.child.getExposed()来获取子组件暴露的方法。改一下调用方式：

this.$refs.child.getExposed().updateData();

就这样。

2026-02-19 12:01