Скачать или смотреть How to Trigger Child Component Methods from Parent in Vue.js

Learn how to facilitate communication between child components and parent components in Vue.js, specifically how to call a child component's method from the parent.
---
This video is based on the question https://stackoverflow.com/q/64844461/ asked by the user 'Steve' ( https://stackoverflow.com/u/11774240/ ) and on the answer https://stackoverflow.com/a/64844561/ provided by the user 'Majed Badawi' ( https://stackoverflow.com/u/7486313/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Vue communcation between child to parent to another child

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Trigger Child Component Methods from Parent in Vue.js

In web development, especially with frameworks like Vue.js, component communication can become a crucial aspect of app design. One common scenario is when you need to trigger a method from a child component based on some action taken in the parent or another child component. This article will unpack this issue and provide a clear solution for firing a method in a child component from a parent component in Vue.js.

The Problem

Let’s consider an example:

You have a <payment-child-component> that handles subscription management.

You also have a <check-active-child-component> that needs to perform an action whenever the user cancels their subscription within the payment component.

The main challenge arises when you need to notify <check-active-child-component> to execute its checkActive() method after a subscription cancellation occurs in <payment-child-component>.

The Solution: Using refs

To resolve this issue, Vue.js provides a powerful feature called refs which allows you to directly reference child components from a parent component. Here’s how to implement this step by step.

Step 1: Create the Child Component

Firstly, let’s define the child component that will have the method to be called:

[[See Video to Reveal this Text or Code Snippet]]

In this component, childMethod() simply logs a message. In your actual application, you would replace this logic with whatever functionality you need.

Step 2: Set Up the Parent Component

In your parent component, you will render the child component and create a reference to it using the ref directive:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

<ChildComponent ref="myChild"/>: This line creates a reference named myChild that allows the parent to access the instantiated child component.

this.$refs.myChild.childMethod(): This line is executed in the mounted() lifecycle hook. When this parent component mounts, it directly calls the childMethod() from the child component using its reference.

Step 3: Emit Events from the Child Component

If you want to trigger this method conditionally (e.g., after a subscription is canceled), you would typically emit an event from the child component to the parent. The parent can then handle this event and execute the child's method as needed.

Example of Emitting an Event:

In the <payment-child-component>, when a user cancels their subscription, you may use something like this:

[[See Video to Reveal this Text or Code Snippet]]

Then, in the parent component, you listen for this event:

[[See Video to Reveal this Text or Code Snippet]]

And define the method in the parent:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With this simple approach using refs, you can facilitate effective communication from parent to child in Vue.js. This method is powerful and extends well beyond the example provided, allowing for a clear and organized structure in larger applications.

By using refs, input from child components can be efficiently managed, ultimately making your components more interactive and responsive to user actions.

Feel free to implement this concept in your projects and witness the ease it brings to component communication!