小白理解Vue插槽

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

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

<script type="text/javascript">
	Vue.component('nlink',{
		template:`天天`
})
</script>

有插槽：

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

<script type="text/javascript">
//模板代码
	Vue.component('nlink',{
		template:`天天`
})
</script>

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

后备内容

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

<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:`{{user.lastname}}`
})
</script>

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

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