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

Question

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

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

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

this.$parent.forceRender()

Answer 1

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

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

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

props: ['forceRender']

然后将其称为

this.forceRender()

Answer 2

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

在子组件中：

this.$emit('force-render')

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

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