cft

Vue.js - How I call a method in a component from outside the component

Calling a method in a component outside that component is something we have to do sometimes. But how exactly can we do that? Are there multiple ways? What is the best practice?


user

Jannick Holm

3 years ago | 4 min read

Calling a method in a component outside that component is something we have to do sometimes. But how exactly can we do that? Are there multiple ways? What is the best practice?

In this article, I try to answer these questions, show you how i like to do it and give some code examples on how you can implement some of my favorite methods in your Vue app.

Alright let’s get started.


1. Using Event Bus

Using an event bus one way to do it. The event bus can be used in most scenarios: sibling-to-sibling, cousin-to-cousin, parent-to-child, child-to-parent. When it comes to the event bus i would recommend that you use in the case of calling a method in a sibling-to-sibling or cousin-to-cousin scenario, why? Because i do believe that there is other more convenient ways for the other scenarios.

What is an event bus?

Essentially an event bus is a Vue.js instance that can emit events in one component, and then listen and react to the emitted event in another component.

There are two ways of implementing an event bus in your project:

1. Implementing the event bus as an instance property

An instance property explained in one sentence is a property (or variable) that you wanna make available global for all your components without polluting the global scope.

Okay, that all sounds really cool and all but how do I set it up in my app? Great question, it’s actually fairly simple once you got the hang of it.

And you can then access it anywhere in your app like this: this.$eventBus


2. Implementing the event bus as an ES6 module

The other way of implementing an event bus is as an ES6 module. Now it might sound scary at first but stay with me here, it is actually not that difficult and can be done in only a few lines of code.

First, we need to create the ES6 module. So let’s do that:

  1. Start by creating a new file in your project called event-bus.js.
  2. Then add the following code to the same file:

As might have already noticed this is very similar to the instance property. We are creating a variable and then exporting the variable so that we can use it in our app.

Tada!! now we have created an ES6 module. See that wasn’t that bad.

Now, all we have to do is import it to the components that we want to use it in and we’ll import it like this:

When we have implemented the event bus in our app we can then emit an event in one of our components like this:

And then in the other component we listen for the event and then executing the method like this:




2. Using $refs

Using the $refs property is a great and simple way of calling a components method from the parent component so to reference the before mentioned scenarios this would be the parent-to-child scenario.


What are $refs property and how do we use it?

The $refs property is used to reference DOM elements in the Vue instance’s templates.

To use the $refs property assign a reference ID to the child component you want to reference using the ref attribute. For example:

Now we can access the child components methods and then call the method directly from the parent component like this:




3. The good old $emit

The $emit property is the last way of calling a components method outside the component that I will show you in this article.

The scenario for using the $emit property would be when you want to call a method in a parent component from the child component also what I call the child-to-parent scenario.

What is the $emit property and how do we use it?

The $emit property is used for emitting a custom event from our child component and we can then listen for the same custom event in our parent component. The $emit property unlike components and props, event names don’t provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name like “updateItem”, listening to the kebab-cased version “update-item” will have no effect.

Emitting the event in the child component:

Listening for the event in the parent component:




Conclusion

So now that I have shown you some of my favorite ways of calling a components method outside of the component, You might still sit with one question. What is the best practice? And thats completely understandable because i didn’t really answer the question and here is why: There isn’t one right way to do it since some of the methods mentioned above only work in specific scenarios and therefore the best practice depends so much more than just some guy in an article picking one for you. It depends on what relation does your component have to the component that you want to call the method from, and of course what do you prefer or what is already used in the project you’re working on.

I hope this article was helpfull for you or maybe this article brought you closer to deciding on which method you want to use for calling a components method outside the component in your project.

If you have any questions put in the comments and i will do my very best to answer, this also applies if you have a fourth (or maybe even a fifth) way of calling a components method outside that component, put it down in the comments so that we can all learn from each other.

Upvote


user
Created by

Jannick Holm

Jannick Holm is a fullstack developer and writer based in Copenhagen, Denmark.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles