[JavaScript知识库]vue的插槽slot使用

前言：有时候我们封装一个公共组件，里面的内容是需要根据自己调用时动态展示内容的，此时插槽是个不错的选择。
1、不具名插槽：我们封装了一个A组件，如果我们想要动态往A组件添加内容，这时在A组件里面安一个插槽slot，即

<template>
	<view class="content">
		<slot></slot>
		这是父组件内容
	</view>
</template>

然后在引用A组件时,下面的内容会内嵌到A组件里面：

<A>
	<view>
		我是往A组件里面动态新添加的内容
	</view>
</A>

在上面的情景中，是以非“组件”添加的方式进行插槽的。假如我们想要往A组件里面动态添加B组件，这时候A组件可以不用设置插槽slot也可，B组件的内容也会内嵌至A组件，如

<template>
	<view class="content">
		这是父组件内容
	</view>
</template>

<A>
	<B></B>
</A>

2、具名插槽：当我们需要用到多个插槽的时候，就需要用到slot的name属性，在A组件设置多个具名插槽如下：

<template>
	<view class="content">
		<slot name="header"></slot>
		这是父组件内容
		<slot name="footer"></slot>
		<slot></slot>//这个是默认插槽，当引用没有指定插槽名字的内容就会展示在此处
	</view>
</template>

然后在引用A组件时，需要使用<template v-slot:name></template>来包含插槽内容，然后对应显示在A组件的对应位置：（v-slot:可以缩写为#）

<A>
	<template #header>
		<h1>Here might be a page title</h1>
		<B></B>
	</template>

	<p>我是默认插槽内容，没有对应名字1</p>
	<p>我是默认插槽内容，没有对应名字2</p>
	
	<template v-slot:footer>
		<p>Here's some contact info</p>
	</template>
</A>

总结：以上就是插槽的几种使用场景。