Vue插槽

Vue-slot插槽

1.当你想从父组件传入DOM节点到子组件中展示时，此时就可以在子组件中定义插槽来进行接收父组件传入的DOM节点，插槽就相当于一个占位符，当父组件并没有传入DOM节点时，此时slot插槽并不会被渲染。传入DOM节点之后便会将传入的DOM节点显示在插槽所在的位置。

slot插槽的分类：

1. 匿名插槽：

//子组件a
<template id="my-a">
 	<div>
		<h1>我是组件a</h1>
		<slot></slot>
	</div>
</template>

//在父组件中
<my-a>
	<div>
		<p>这些内容将显示在匿名插槽所在的位置</p>
	</div>
</my-a>

2.具名插槽

//组件a
<template id="my-a">
 	<div>
		<h1>我是组件a</h1>
		<slot></slot>
		<slot name="s1"></slot>
	</div>
</template>
//父组件中
<my-a>
	<div slot="s1">
		<p>这些内容将在具名  名为s1的插槽所在的位置显示</p>
	</div>
</my-a>

3.作用域插槽

//子组件a内的data
data(){
	return{
	data:'11111'
}
}
//模板
<template id="my-a">
 	<div>
		<h1>我是组件a</h1>
		<slot></slot>
		<slot name="s1"     ：data="data"></slot>
	</div>
</template>
//父组件中
<my-a>
	<div slot="s1"   slot-scope="a(自定义名称，此处a表示子组件a的作用域对象)">
		<p>这些内容将在具名  名为s1的插槽所在的位置显示</p>
		<p>{{a.data}}</p>
	</div>
</my-a>
//此时只要  插入的DOM上有  slot-scope属性则表示此DOM显示在作用域插槽上，此DOM节点上访问的数据均为子组件a上的数据

注意事项：

1. 匿名插槽最好只有一个，即使写了多个可以显示，但是还是会报错
2. 作用域插槽中访问子组件中的数据时，需要作用域名+.+变量名的方式访问