I currently have 3 components in my project: Form, Card, and Button.
Let's start with the Button.vue component:
<template>
<div>
<slot v-bind="{ text }">
<button>{{ text }}</button>
</slot>
</div>
</template>
<script setup>
const props = defineProps({
text: {
type: String,
required: true
}
});
</script>
Next, we have the Card.vue component:
<template>
<Button text="{ text }">
<template #default="{ text }">
<button>{{ text }}</button>
</template>
</Button>
</template>
<script setup>
import Button from './Button.vue'
const props = defineProps({
text: {
type: String,
required: true
}
});
</script>
And finally, here is the Form.vue component:
<template>
<div>
<Card text="Some text">
<template #default="{ text }">
</template>
</Card>
</div>
</template>
<script setup>
import Card from './Card.vue'
</script>
My main inquiry now is: How can I successfully transfer the text data from the Form.vue to its child component Button.vue?