vue插槽

具名插槽

如果一个组件要插入多部分内容那么就要用到 具名插槽 具体位置插入指定内容

<Abb>
	<template v-slot:title>
		<h1>hello1</h1>
	</template>
	<template v-slot:age>
		<h1>hello2</h1>
	</template>
</Abb>

• Abb组件内容里就要有两个与之对应的模块

<div>
	<slot name="title"></slot>
	<slot name="age"></slot>
</div>

作用域插槽

v-slot:title=“slotProps”

title:插槽名称
slotProps:子组件上下文 通过slotProps可以拿到子组件的属性

<message>
	<template v-slot:title="slotProps">
		<p>{{slotProps.title}}</p>
	</template>
</message>
//这里的slotProps 指的就是message组件的上下文  通过slotProps可以获取子组件message中的属性