插槽

插槽可以让我们的父组件的内容，输出到子组件，方便复用

具体的可以去想一下那个搜索框

基本的使用

我们只需要在子组件中定义一个插槽

	<template id="cpn">
		<div>
			<h2>我是子组件</h2>
			<!-- 如果中间有内容则是默认值 -->
			<slot><button>默认值</button></slot>
		</div>
	</template>

插槽中slot中的是默认值，这个是单个插槽，当我们使用的时候，我们仅仅需要在父组件中输入就行了，注意一下假如说有内容则输出按钮sss，如果没内容则输出按钮默认值

	<div id="app">
		<my-cpn><button>sss</button></my-cpn>
		<my-cpn></my-cpn>
	</div>		

具名插槽（Vue 2.6以上）

当我们有多个插槽时就像下面这个一样

	<template id="cpn">
		<div>
			<slot name="left">
				<h1>插槽1</h1>
			</slot>
			<slot>
				<h2>默认插槽</h2>
			</slot>
			<slot name="right">
				<h1>插槽2</h1>
			</slot>
			<hr />
		</div>
	</template>

这个里面有多个插槽的时候，我们只需要用name来指定每个插槽的名字，假如说没有name的就是默认的插槽，然后在父组件像下面这么做。

		<my-cpn ref="aa">
			<template #left>
				<h1>新的内容1</h1>
			</template>
			内容3
			<template v-slot:right>
				<h1>新的内容2</h1>
			</template>
			内容3
		</my-cpn>

在自定义的组件内使用***template***来进行，注意这个#是 v-slot:的缩写 后面跟上的是子组件的***name***

作用域插槽（Vue 2.6以上）

假如说我们想要传递给子组件内容，同时又需要子组件的***data***那么我们就需要作用域插槽，很简单，我们只需要**v-bind绑定到slot上即可

<slot name="list" v-bind:data="pLanguages">
		<ul>
			<li v-for="item in pLanguages">
				{{item}}
			</li>
		</ul>
</slot>

就像这样一样，其中注意 *=前面的 ***data可以自定义，然后后面的是data的数值然后这样就可以把data传递到父组件中，

父组件

<my-cpn v-show="true">
	<template v-slot:list="pLanguages">
		{{pLanguages.data}}
	</template>
</my-cpn>

注意，当有多个插槽的时候不能够使用#来简写，必须要使用全写

v-slot:list="pLanguages"

list是插槽的name

pLanguages是自定义的一个名字

其他的内容推荐大家可以继续去看Vue的官方文档

https://cn.vuejs.org/v2/guide/components-slots.html