Can we plz get a define slot props and a ,slots for functional components.

[louiss0]

Can we plz get a define slots functions for script setup and a..slots function for functional component's
The use slots function is not good enough. I need to be able to know what information is being passed from the parent to the child. When using slots. I like to use function component's as wrapper component's. A define slots function would allow me to create tell the component what slots it needs and what information would be passed down from parent to child. The defineSlots() would be written the same way as define props. Except you wouldn't need to tell create a default option just a validate one for props.

Let's start with an example for SFC's

// This is a container
<script lang="ts" setup>

defineSlots(["default"])

</script>

<template >
	<div>
		<slot/>
	</div>
</template>

// App.vue 


<script lang="ts" setup>

import Container from "Container.vue"
</script>

<template >
	<Container>
		This text is contained. 
	</Container>

// This second one will now throw an error since I have to put in information into the slot
<Container/>

</template>

Now for functional component's

export default function Card({title, content, readTime}, {slots}){

	return <div>
		<div>
			{title}
		</div>
		<p>
		
		{ slots.default({content}) } 
		</p>
		<div>
		{readTime}
		</div>
	
	</div>

}

Card.props = {
	title: {
		type:String, 
		required: true,
	},
	content: {
		type: String,
		required: true,
	},
	readTime: {
		type:Number,
		required: true  
	}
	
}

// default is an object when props will be passed since props will be passed as an object through slot props.

Card.slots = {
	default: {
		content:String,
	}
}

<script lang="ts" setup>

import Card from "./components/Card.vue";

</script>
<Card>

	// I could [ctrl] + [space] and get the name and type of the data that was passed
	<template #default="{default}"> 
		
	</template>
	
</Card>