深入浅出Vue插槽slot与slot-scope

slot：分为默认插槽（没名字），具名插槽（有名字的）

slot-scope：作用域插槽

一、？为什么要用插槽，这玩意儿有什么用，一段代码一目了然

父组件：

<template>
	<div>
		<div>父</div>
		<son>
			这个就是插入的内容
		</son>
	</div>
</template>

子组件：

<template>
	<div>
		<div>子</div>
	</div>
</template>

  输出结果：很明显我们想插入的内容“这个就是插入的内容”这几个字没有展示出来。

子组件加入<slot></slot>标签：

<template>
	<div>
		<div>子</div>
		<slot></slot>
	</div>
</template>

输出结果：这样一对比就能很清楚了

二、现在再来谈谈什么叫默认插槽，具名插槽，作用域插槽。上面这种没名字的写法就叫默认插槽

          2.1：具名插槽，为插槽设置一个名字，可更改指定名字插槽的内容

父组件：

<template>
	<div>
		<div>父</div>
		<son>
			<template slot="one">
				<div>
					新内容1
				</div>
			</template>
			<template slot="two">
				<div>
					新内容2
				</div>
			</template>
		</son>
	</div>
</template>

子组件：

<template>
	<div>
		<div>子</div>
		<slot name='one'>这个就是插入的内容1</slot>
		<slot name='two'> 这个就是插入的内容2 </slot>
		<slot name='three'> 这个就是插入的内容3 </slot>
	</div>
</template>

输出结果：通过结果可以很明显看出来，插槽1和插槽2的内容被修改了，而3则是子组件原本的内容

三、作用域插槽，这东西为什么存在？因为父组件的东西只能在父组件用， 子组件的只能在子组件用。如果你想要在父组件用子组件data里面的数据就要使用到插槽了。

父组件：上了代码之后是否觉得有点熟悉了呢？没错element ui的table按钮就用到了这个东西

<template>
	<div>
		<div>父</div>
		<son>
			<template slot-scope="scope">
				<div  v-for="item in scope.data">
					{{item.name}}
				</div>
			</template>
		</son>
	</div>
</template>

子组件：

<template>
	<div>
		<div>子</div>
		<slot :data="arr"></slot>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				arr: [{
						name: "插槽1",
					},
					{
						name: "插槽2",
					},
					{
						name: "插槽3",
					}
				]
			}
		},
	}
</script>

输出结果：