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

Question

我只是想知道如何从子组件调用父函数。

我尝试使用

$parent

来调用父方法，但出现此错误

类型错误：_this.$parent.forceRender 不是函数

这是我尝试调用的父方法：

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

这是子组件，您可以看到我正在尝试使用

$parent

:

调用父方法

this.$parent.forceRender()

Answer 1

您可以将函数作为 props 发送到子组件，如下所示

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

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

props: ['forceRender']

然后称其为

this.forceRender()

Answer 2

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

在子组件中：

this.$emit('force-render')

在父组件中将

@force-render

添加到组件标签，并使用

forceRender

作为处理程序：

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