从 child - vue.js 调用 grandchild 函数

Question

我在 vue 中有 4 个组件，我想从 child 组件调用一个 grandchild 函数（'refreshArtifact'），知道我该怎么做吗？

这是我的组件层次结构：

Parent : TeamManagment.vue

Children :TeamPlatform.vue & ManagementArtifcts.vue

孙子 : TeamAction.vue (TeamPlatform.vue child)

我想从 ManagmentArtifact.vue 组件调用 TeamAction.vue 中的 'refreshArtifact' 函数.

Answer 1

在我看来，你现在不能直接调用兄弟的child功能。因此，使用您的代码，您不能直接从作为 A 的兄弟的组件 B 调用组件 A 的函数。

但是，您可以使用祖父母组件来做到这一点。 所以，当 ManagmentArtifact.vue 组件需要调用 refreshArtifact 函数时，你可以发出一个事件。 TeamManagment.vue 侦听该事件，然后通过使用 ref 或 TeamPlatform.vue component 来调用函数。

ManagmentArtifact.vue: this.$emit('callRefresh') TeamManagment.vue: <ManagmentArtifact @callRefresh='refreshArtifact' /> <TeamPlatform ref='team' /> methods: { refreshArtifact(){ this.$ref.team.refreshArtifact() } }

您可以阅读文档 here。