Seamlessly pass props and emit events on nust 3 component. [CHEAT SHEET]

Web Development
A

07 Mar 2024

seamlessly-pass-props-and-emit-events-on-nust-3-component-cheat-sheet

Nuxt 3 makes it super easy to seamlessly pass props from parent to child components and vice versa. By using the popular method of prop passing, you can efficiently send data down the component hierarchy.

On the other hand, emitting events in Nuxt 3 allows you to trigger actions in parent components based on user interactions or other events within child components. This two-way communication system in Nuxt 3 ensures a smooth and interactive user experience.

So, whether you're building a simple website or a complex web application, mastering prop passing and event emitting in Nuxt 3 is a must-have skill in your developer toolkit. Happy coding!

CheatSheet

parent.vue

<template>
	<UContainer class="border m-4">
		{{ counter }}
		<Child
			@emitChange="doSomething"
			@anotherEmit="myfunc"
			:something="counter"
		/>
	</UContainer>
</template>

<script setup>
	const counter = ref(1);
	function doSomething(val1) {
		counter.value = val1;
	}
	function myfunc(val1) {
		counter.value = val1;
	}
</script>

We are passing a prop called something on the parent, and catching two events called emitChange and anotherEmit.

child.vue

<template>
	<UContainer class="border m-4 space-x-4">
		<UButton
			icon="i-heroicons-bell-solid"
			size="md"
			color="primary"
			variant="solid"
			label="Click to change 10"
			@click="change(10)"
		/>
		<UButton
			icon="i-heroicons-bell-solid"
			size="md"
			color="primary"
			variant="solid"
			label="Click to change 20"
			@click="change2(20)"
		/>
		{{ something }}
	</UContainer>
</template>

<script setup>
	const props = defineProps({
		something: Number,
	});
	const emit = defineEmits(["emitChange", "anotherEmit"]);
	function change(numb) {
		emit("emitChange", numb);
	}
	function change2(numb) {
		emit("anotherEmit", numb);
	}
</script>

Catching props called something. Emiting two events change and change2

devuly logo

Fully styled and customizable components for Nuxt.

Installation

Install @nuxt/ui dependency to your project:

$ npm i @nuxt/ui$ yarn add @nuxt/ui$ pnpm add @nuxt/ui

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

All Posts
Seamlessly pass props and emit events on nust 3 component. [CHEAT SHEET]seamlessly-pass-props-and-emit-events-on-nust-3-component-cheat-sheet
Web Development
A

07 Mar 2024

To pass data from a parent component to a child component, you can use defineProps in the child component and then pass the data from the pa...

What is red team in cyber securitywhat-is-red-team-in-cyber-security
Technology
A

23 Feb 2024

The red team in cyber security is a group of experts who test an organization's defenses by simulating real-world cyber attacks. Their goal ...

What is a google subscriber phone number?what-is-a-google-subscriber-phone-number
Technology
A

22 Feb 2024

Google Voice number aka Google subscriber phone number is a handy tool for managing your calls and messages, especially if you want to keep ...

Similarities and Differences Between Next.js vs Nuxt.jsexploring-the-similarities-and-differences-between-nextjs-vs-nuxtjs
Web Development
A

26 Feb 2024

Next.js and Nuxt.js stand out as popular options, both offering powerful features and streamlined workflows. While sharing some core simila...

What is the first step in creating an online business strategywhat-is-the-first-step-in-creating-an-online-business-strategy
Technology
A

23 Feb 2024

Creating an online business strategy involves several key steps to ensure success. Here's a structured approach:

What are amazon platinum keywords and why it's obsolete today what-are-amazon-platinum-keywords-and-why-its-obsolete-today
SEO
A

22 Feb 2024

Amazon Platinum Keywords were a feature that allowed sellers to select specific keywords to associate with their products. These keywords wo...

What is not a benefit of google analytics remarketingwhat-is-not-a-benefit-of-google-analytics-remarketing
SEO
A

22 Feb 2024

While remarketing can increase conversion rates and ROI by targeting users who have already shown interest in your products or services, it ...

How to reach my first 5k followers on youtubehow-to-reach-my-first-5k-followers-on-youtube
Technology
A

23 Feb 2024

Growing your YouTube channel to reach your first 5k followers requires dedication, consistency, and strategic planning. Here are some steps ...

How to tell if a woman is a NYMPH , And solution. how-to-tell-if-a-woman-is-a-nymph-and-solution
Others
A

23 Feb 2024

Instead of trying to classify them based on outdated and harmful stereotypes, focus on getting to know them as individuals and appreciate th...