[SOLVED] Call grandchild function from a child

Call grandchild function from a child - vue.js

I have 4 components in vue, I want to call a grandchild function('refreshArtifact') from a child component, any idea how can I do it?

So here is my component hierarchy:

Parent : TeamManagment.vue

Children :TeamPlatform.vue & ManagementArtifcts.vue

GrandChild : TeamAction.vue (TeamPlatform.vue child)

i want to call the 'refreshArtifact' function in TeamAction.vue from the ManagmentArtifact.vue component.

Solution

In my opinion, you can't right now directly call a child function of a brother. So, with your code, you can't directly call a function of a component A, from a component B which is the brother of the A one.

But, you can do that with the grandparent component. So, when the ManagmentArtifact.vue component need to call refreshArtifact function, you can emit an event. The TeamManagment.vue listen that event, and then pass use ref of TeamPlatform.vue component to call the function.

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

You can read the doc here.