Cannot invoke an object which is possibly ‘undefined‘.Vetur(2722)

Vue子组件调用祖父组件方法的解决方案

最新推荐文章于 2025-03-02 10:35:06 发布

原创最新推荐文章于 2025-03-02 10:35:06 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

在Vue应用中，当子组件需要调用祖父组件的方法时，可能出现'undefined'的错误。解决这个问题的一种方法是在调用时进行存在性检查，例如`props.removeTodo && props.removeTodo(props.index)`。此外，也可以通过在父组件中绑定`v-bind=$attrs`并将不需要在父组件中声明的方法传递给子组件。这种做法可以避免因未定义的引用而导致的错误。

Cannot invoke an object which is possibly 'undefined'.
    51 |     const remove = () => {
    52 |       // 祖父组件传过来的删除方法
  > 53 |       props.removeTodo(props.index);
       |       ^^^^^^^^^^^^^^^^
    54 |     };

改成下面这样即可：
    const remove = () => {
      props.removeTodo && props.removeTodo(props.index);
    };

我的页面是：祖父组件->父组件->子组件，在子组件中调用祖父组件里的方法报错，加上判断即可解决；

tip:子组件用祖父组件里的方法或者值可以在父组件上绑定v-bind="$attrs"，且父组件里props不接收此方法，在子组件里接收；