从子vue.js调用外孙函数

Question

我在vue中有4个组件，我想从一个子组件调用一个外孙函数(‘refreshArtifact’)，知道我怎么做吗？

下面是我的组件层次结构：

父级：TeamManagment.vue

儿童 :TeamPlatform.vue & ManagementArtifcts.vue

GrandChild：TeamAction.vue (TeamPlatform.vue儿童)

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

Answer 1

在我看来，你现在不能直接调用一个兄弟的儿童功能。因此，使用您的代码，您不能从组件B直接调用组件A的函数，后者是A的兄弟。

但是，您可以使用祖父母组件来完成这一任务。因此，当ManagmentArtifact.vue组件需要调用refreshArtifact函数时，可以发出一个事件。TeamManagment.vue侦听该事件，然后传递使用ref of TeamPlatform.vue component调用函数。

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

您可以阅读这里文档。