《标签篇》标签slot

参考链接：https://www.cnblogs.com/huihuihero/p/13067056.html

介绍

插槽（Slot），在各种vue的ui插件中，经常见到的多个组件标签相互嵌套（如下）就是以此为基础的。

<el-col >
	   <el-checkbox >
</el-col>

而我们也经常会用到这种场景，例如封装一个边框样式的组件，组件中的内容，可以通过这种方式制作，或者将子组件提取到父组件中进行操作等等。

slot分为两种情况，匿名和具名。

匿名
子组件：

<div>
	<h2>我是子组件的标题</h2>
	<slot></slot>   /*这里插入父组件在引用子组件内部的内容*/
</div>

父组件：

<div>
	<h1>我是父组件的标题</h1>
	<my-component>
		<p>这是一些初始内容</p>
		<p>这是更多的初始内容</p>
	</my-component>
</div>

父组件p标签的位置也可以放一些其他组件。my-component标签中的内容，会插入到该组件slot标签的位置。
当渲染后，就会变成：

<div>
	<h1>我是父组件的标题</h1>
	<div>
		<h2>我是子组件的标题</h2>
		<p>这是一些初始内容</p>
		<p>这是更多的初始内容</p>
	</div>
</div>

具名:具名slot其实就是对匿名slot的补充，它可以做到将组件插入到子组件的指定位置。
子组件：

<div>
	<slot name="header"></slot>
	<slot name="footer"></slot>
	<slot></slot>
</div>

父组件：

<my-component>
	<p>Lack of anonymous slot, this paragraph will not shown.</p>
	<p slot="footer">Here comes the footer content</p>
	<p slot="header">Here comes the header content</p>
</my-component>

渲染结果：

<div>
	<p>Here comes the header content</p>
	<p>Here comes the footer content</p>
	<p>Lack of anonymous slot, this paragraph will not shown.</p>
</div>