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

Question

大家好，我想知道如何从子组件调用perent函数我曾尝试使用$parent来调用perent方法，但我的错误类型是error:this$parent.forceRender不是函数这是我试图调用的父方法

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

这是子组件，正如你所看到的，我正试图使用$parent调用父方法

this.$parent.forceRender()

Answer 1

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

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

在子组件中，您可以像这样接收

props: ['forceRender']

然后称之为

this.forceRender()

Answer 2

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

子组件中：

this.$emit('force-render')

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

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