小白理解Vue插槽

根据Vue.js官网文档，<slot>元素是承载分发内容出口
理解：<slot>元素看作是具有特殊作用的**HTML元素**，组件中的内容填入<slot>元素所在的位置。
对比：
没有插槽

<!--组件调用处-->
<nlink>百度一下</nlink>

<script type="text/javascript">
	Vue.component('nlink',{
		template:`<a href="http://www.baidu.com">天天</a>`
})
</script>

有插槽：

<!--组件调用处-->
<nlink>百度一下</nlink>

<script type="text/javascript">
//模板代码
	Vue.component('nlink',{
		template:`<a href="http://www.baidu.com"><slot>天天</slot></a>`
})
</script>

<slot>元素中的内容，是默认内容
有插槽：是组件调用处内容替换模板内容
没有插槽：模板替换组件调用处内容。
在组件template中使用了<slot>元素，组件调用处包含的内容是插槽(自己理解)
其中：插槽中可以是html代码，可以是字符串
后备内容：
就是候补，插槽中内容为空，后备内容就上场了。

<slot>后备内容</slot>

作用域插槽：
目的：父组件为了访问子组件中的数据
使用:

<current-user >
	<!--v-slot-->
	<!--想要在父级元素中调用user,在模板中将user作为slot的属性，并绑定,绑定属性值为user-->
	<!--slotProps是所有插槽属性集合-->
	<template v-slot="slotProps">{{ slotProps.user.firstname }}</template>
</current-user>
<script type="text/javascript">
	Vue.component('current-user',{
		data(){
			return {
					user:{
						firstname:'b',
						lastname:'c'
					}
			}
		},
		//slot中定义了user属性-prop属性，并绑定了该属性
		//绑定的属性值是user,后备内容是user.lastname
		template:`<span><slot v-bind:user="user">{{user.lastname}}</slot></span>`
})
</script>

其中v-slot需要和template一起使用，有一种特殊情况，可参考官方文档（当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用）。

应用：
在element-ui的el-table-column中提供了Table Scope Slot

<el-table-coloumn>
	<template v-slot=""scope>
	<!--获取当前的整行数据-->
		<span>{{scope.row }}</span>
			<!--获取当前的整行数据index索引-->
		<span>{{scope.$index}}<./span>
	</template>
</el-table-column>