N
Nuxt•20h ago
Cordobes

Components props?

how i can pass values to a component @kapa.ai
2 Replies
kapa.ai
kapa.ai•20h ago
Hi @Cordobes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass values to a component in Nuxt, you can use props. Here's how you can do it: 1. Define props in the child component: In your child component, use defineProps to declare the props it expects to receive: 
<script setup>
const props = defineProps({
  myProp: String
})
</script>
<script setup>
const props = defineProps({
  myProp: String
})
</script>
2. Pass values from the parent component: In the parent component, you can pass values to the child component using the defined prop names: 
<template>
  <ChildComponent myProp="Hello World" />
</template>
<template>
  <ChildComponent myProp="Hello World" />
</template>
You can also bind dynamic values using the v-bind directive or its shorthand :: 
<template>
  <ChildComponent :myProp="dynamicValue" />
</template>
<template>
  <ChildComponent :myProp="dynamicValue" />
</template>
For more complex data types like objects or arrays, you can pass them as JSON strings and use the : prefix to automatically decode them: 
<template>
  <ChildComponent :complexProp='{"key": "value"}' />
</template>
<template>
  <ChildComponent :complexProp='{"key": "value"}' />
</template>
These methods are described in the Nuxt Content documentation. Additionally, when using <NuxtPage>, you can pass custom props that will be available in your page components: 
<template>
  <NuxtPage :customProp="123" />
</template>
<template>
  <NuxtPage :customProp="123" />
</template>
You can then access this prop in your page component as described in the Nuxt documentation. Remember that props in Vue (and by extension, Nuxt) are used for passing data from parent to child components. They form a one-way data flow, which helps maintain a clear and predictable data structure in your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•20h ago
<@1275808916168511508> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?