How to get Access to a Child Method From the Parent in VueJS ?

Last Updated : 06 Aug, 2024

When working with Vue.js components, it's common to encounter scenarios where you need to access a method inside the parent component that is defined in a child component. This can be useful for triggering specific actions or updating the child component's state.

Below are the methods that can be used to access a child component method from a parent component in VueJS.

Table of Content

Using $refs
Using Custom Events

Using $refs

This approach involves using the $refs property provided by Vue.js to create a reference to the child component. The parent component can then directly call methods on the child component using this reference.

Example 1: The below code uses $refs to access the child component method from the parent component in VueJS.

HTML

<!-- ParentComponent.vue -->
<template>
	<div>
		<h2>Parent Component</h2>
		<button @click="callChildMethod">
			Call Child Method
		</button>
		<child-component ref="childRef"/>
	</div>
</template>

<script>
	import ChildComponent from 
	'./ChildComponent.vue';

	export default {
		components: {
			ChildComponent,
		},
		methods: {
			callChildMethod() {
				const childComponent = 
				this.$refs.childRef;
				if (childComponent) {
					childComponent.childMethod();
				} else {
					console.error
					('Child component reference is undefined.');
				}
			},
		},
	};
</script>

HTML

<!-- ChildComponent.vue -->
<template>
	<div>
		<h3>Child Component</h3>
	</div>
</template>

<script>
	export default {
		methods: {
			childMethod() {
				console.log
				('Child method called!');
			},
		},
	};
</script>

JavaScript

<!-- App.vue -->
<template>
	<div id="app">
		<parent-component />
	</div>
</template>

<script>
	import ParentComponent from
		'./ParentComponent.vue';

	export default {
		components: {
			ParentComponent,
		},
	};
</script>

<style>
	#app {
		font-family:
			Avenir, Helvetica, Arial, sans-serif;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>

Output:

Example 2: The below example includes the advanced VueJS code to show some message on the user screen once the button is clicked and child method get accessed.

HTML

<!-- ParentComponent.vue file -->

<template>
	<div>
		<h2>Parent Component</h2>
		<button @click="callChildMethod">
			Call Child Method
		</button>

		<!-- Display message with transition -->
		<transition name="fade" mode="out-in">
			<div v-if="message" class="message">
				{{ message }}
			</div>
		</transition>

		<child-component ref="childRef" />
	</div>
</template>

<script>
	import ChildComponent from 
	'./ChildComponent.vue';

	export default {
		components: {
			ChildComponent,
		},
		data() {
			return {
				// Message to be displayed
				message: '', 
			};
		},
		methods: {
			callChildMethod() {
				// Access the child component using $refs
				const childComponent = this.$refs.childRef;

				// Check if the child component reference is valid
				if (childComponent) {
					// Call the method in the child 
					// component and get the result
					const result = childComponent.childMethod();

					// Update the message based on the result
					this.message = result;
				} else {
					console.error
					('Child component reference is undefined.');
				}
			},
		},
	};
</script>

<style>
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.message {
		margin-top: 10px;
		padding: 10px;
		background-color: #4caf50;
		color: #ffffff;
	}
</style>

JavaScript

<!-- ChildComponent.vue file -->

<template>
	<div>
		<h3>Child Component</h3>
	</div>
</template>

<script>
	export default {
		methods: {
			childMethod() {
				console.log
				('Child method called!');
				// Your child component logic here

				// Return a message to the parent
				return
				'Message from Child Component!';
			},
		},
	};
</script>

JavaScript

<!-- App.vue -->
<template>
	<div id="app">
		<parent-component />
	</div>
</template>

<script>
	import ParentComponent from
		'./components/ParentComponent.vue';


	export default {
		components: {
			ParentComponent
		},
	};
</script>

Output:

Using Custom Events

This approach involves using Vue.js custom events to establish communication between the parent and child components. The child component emits a custom event, and the parent component listens for that event, triggering the desired method.

Example: The below code uses custom events to access the child component method from the parent component in VueJS.

HTML

<!-- ParentComponent.vue -->
<template>
	<div>
		<h2>Parent Component</h2>
		<child-component 
		@child-method-triggered="callChildMethod" />
	</div>
</template>

<script>
	import ChildComponent from 
	'./ChildComponent.vue';

	export default {
		components: {
			ChildComponent,
		},
		methods: {
			callChildMethod() {
				console.log
				('Child method called!');
			},
		},
	};
</script>

HTML