Vue插槽

vue的插槽:可以在子组件中插入一些代码片段或组件,可以理解为在组件中放置了代码占位符

默认插槽

默认插槽,是指组件中只有一个插槽

// 子组件ChildDefault
<template>
	<div>
		<p>插槽上部内容</p>
		<slot>默认插槽内容</slot>
		<p>插槽底部内容</p>
	</div>
</template>
// 父组件使用子组件ChildDefault
<template>
	<div>
		<child-default>可以插入任意HTML内容</child-default>
	</div>
</template>

具名插槽

1.在默认插槽基础上需要使用多个插槽，就需要在slot上使用name属性来区分具体传入的html是放入哪个插槽中。
2.在父组件传入需要使用标签包裹住需要传入的html内容，并且在标签上使用v-slot:对应插槽name属性，也可以简写为#对应插槽name属性。没有temple标签包含的内容会隐式为#default的插槽内容。

// 子组件NameChildCoponent
<template>
	<div>
		<slot name='header'>头部插槽内容</slot>
		<slot>默认插槽内容</slot>
		<slot name='foot'>底部插槽内容</slot>
	</div>
</template>
// 父组件使用子组件ChildDefault
<template>
	<div>
		<name-child-coponent>
			<template #header>
			头部HTML内容
			</template>
			<template #default>
			头部HTML内容
			</template>
			<template #foot>
			底部HTML内容
			</template>
		</name-child-coponent>
	</div>
</template>

作用域插槽

1.作用域插槽，是一种特殊的插槽,可以允许子组件将数据传递给父组件的插槽.
2,可以通过插槽标签slot添加一个属性来定义数据

<!-- 子组件<MyComponent>  -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>
<!-- 父组件  -->
<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>
<!-- 父组件,也可以使用结构赋值  -->
<MyComponent v-slot="{text ,count }">
  {{ text }} {{ count }}
</MyComponent>