How to Call a Parent Method from a Child Component in Vue 3 ?
Vue.js is a JavaScript framework for building user interfaces. In Vue 3 parent and child component can communicate with each other through props and events. Props are used to pass the data from the parent to the child component and events are used to pass the data from child to parent component.
These are the following approaches:
Table of Content
- Using $emit to emit an event from the child component
- Using $parent or $root to access the parent component directly
Setting Up the Project Environment
Step 1: Create a Vue.js application
npm create vue@latest
Step 2: Navigate to your project directory and install dependencies:
cd your-project-name
npm install
Step 4: Create the Parent Component
Inside the src/component directory create a new file called ParentComponent.vue.
Step 5: Create the Child Component
Inside the src/component directory create a new file called ChildComponent.vue.
Step 6: Import and Use Component in App.vue
Open src/App.vue and import both child and parent component.
Project Structure:
Using $emit to emit an event from the child component
This approach is recommended approach which follows the principle of Vues component communication. In this approach the child component use $emit instance method to emit an event with an optional payload and in parent component you listen for the emitted event using the v-on directive and define a method to handle the event.
Example: This example shows the implementation of the above-explained approach.
// Parent Component
<template>
<div>
<child-component @greet="handleGreetMessage">
</child-component>
<h2 style="text-align: center;">
{{ greetMessage }}</h2>
</div>
</template>
<script>
import ChildComponent from './Childcomponent.vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
greetMessage: ''
}
},
methods: {
handleGreetMessage(message) {
this.greetMessage = `Parent says: ${message}`;
}
}
}
</script>
// Child Component
<template>
<div>
<button style="display:block;margin:auto;"
@click="emitEvent('hello')">Say Hello</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
methods: {
emitEvent(message) {
this.$emit('greet', message);
}
}
}
</script>
Output:
Step 7: Run the Project
Run the project in terminal using following command
npm run serve
Using $parent or $root to access the parent component directly
This approach is not recommended as it tightly couples the child component to its parent which make it harder to maintain and reuse the child component in other parts of the application. In this approach the child component parent component method using $parent or $root instance properties.
Example: This example shows the implementation of the above-explained approach.
<!-- ParentComponent.vue -->
<template>
<div>
<child-component></child-component>
</div>
<h2 style="text-align: center;">
{{ greetMessage }}</h2>
</template>
<script>
import ChildComponent from './Childcomponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
greetMessage: ''
}
},
methods: {
parentMethod() {
this.greetMessage = 'Hello from Parent Component';
}
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<button style="display: block; margin: auto;"
@click="callParentMethod">
Call Parent Method</button>
</div>
</template>
<script>
export default {
methods: {
callParentMethod() {
this.$parent.parentMethod();
}
}
}
</script>
Output:
Contact Us