使用 vue.js 在子组件中调用父方法答案

【问题标题】：call parent method in child component using vue.js使用 vue.js 在子组件中调用父方法
【发布时间】：2021-02-25 21:08:04
【问题描述】：

大家好，我想知道如何从子组件调用 perent 函数我尝试使用 $parent 来调用 perent 方法，但我有这个错误 typeError: _this.$parent.forceRender is not a function 这是我试图调用的父方法

methods: {
      forceRender() {
        this.componentKey += 1
      }
    },

这是子组件，你可以看到我正在尝试使用 $parent 调用父方法

this.$parent.forceRender()

【问题讨论】：

【解决方案1】：

您应该从子组件向父组件发出事件以运行父方法：

在子组件中：

this.$emit('force-render')

在父组件中添加@force-render到组件标签，forceRender作为处理程序：

<child-component @force-render="forceRender" />

【讨论】：

【解决方案2】：

您可以将函数作为道具发送给子组件，如下所示

<child-component :forceRender="forceRender" />

在子组件中你可以像这样接收它

props: ['forceRender']

然后将其称为

this.forceRender()

【讨论】：