Calling a Vue.js’s component from outside the component is something that we have to do sometimes.
In this article, we’ll look at how to call one component’s function from another component.
Refs
We can assign a ref to a component and then we can get the whole component object from the ref, including its methods.
For instance, we can write:
App.vue
<template>
<div id="app">
<button @click="hello">hello world</button>
<HelloWorld ref="hello" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
methods: {
hello() {
this.$refs.hello.helloWorld();
},
},
};
</script>
components/HelloWorld.vue
<template>
<div class="hello">
<h1>hello world</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
helloWorld() {
alert("hello world");
},
},
};
</script>
In App.vue , we have a button that calls the hello method when we click it.
And we have the HelloWorld component that’s assigned the hello ref.
Then we defined the hello method that calls this.$refs.hello.helloWorld method.
In HelloWorld.vue , we defined the helloWorld method.
It’s the same method that’s referenced by this.$refs.hello.helloWorld .
Therefore, when we click on the button, we see ‘hello world’ displayed in the popup.
This works if we want to call a child component’s method from a parent.
Emitting Events
If we want to call a parent component’s method from a child component, we can emit an event to do so.
To emit an event, we use the $emit method.
For instance, we can write:
App.vue
<template>
<div id="app">
<HelloWorld [@greet](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fgreet "Twitter profile for @greet")="hello" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
methods: {
hello(name) {
alert(`hello ${name}`);
},
},
};
</script>
components/HelloWorld.vue
<template>
<div class="hello">
<button @click="greet">greet</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
greet() {
this.$emit("greet", "jane");
},
},
};
</script>
In App.vue , we have the HelloWorld component in the templaye.
We have the @greet directive to listen to the greet event emitted from the HelloWorld component.
It’s set to the hello method as its value, so it’ll be called when we emit the event.
Then we add the hello method with the name parameter.
We get the name parameter and call alert with it.
Then in HelloWorld.vue , we have a button that calls the greet method when we click it.
The greet method calls this.$emit to emit the greet event.
The first argument of the $emit method is the event’s name.
The 2nd argument and beyond are the arguments we want to pass into the method that’s called.
So 'jane' is the value of the name parameter of hello in App.vue .
Therefore, if we click the greet button, we should see ‘hello jane’ displayed in the alert popup.
Conclusion
We can call a child component’s method from a parent component by assigning a ref to the child component.
And then call the child component’s ref’s methods to call them.
If we want to call a method in the parent component from the child, then we emit an event with the parameters we want to call the method with.
