插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签
用法一：默认插槽用法
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制，默认插槽可以通过父组件的标签进行传递标签的内容，甚至组件都看可以。
父组件
<template>
<div>
<span>父组件slot使用</span>
<slot-study>
<p>父组件传的参数</p>
</slot-study>
</div>
</template>
<script>
import slotStudy from '@/components/slot.vue'
export default {
name: 'study',
components: {
slotStudy
}
}
</script>
子组件
<template>
<div>
<p>子组件</p>
<slot>哈哈哈哈哈哈</slot>
</div>
</template>
视图展示内容
image.png
这里我们可以看到，子组件插槽标签展示的内容是父组件通过组件标签传递过来的。也就是说插槽的内容是由父组件决定（补充：当父组件没有传递参数时，默认是子组件的内容）
用法二：具名插槽
具名插槽可以自定义组件通过插槽的方式插入多处。
子组件通过slot标签定义name属性，然后父组件通过slot属性对应子组件的slot标签的name，这样就能在组件相应的位置插入需要的信息了
父组件
<template>
<div>
<h3>具名插槽使用</h3>
<have-name>
<div slot="first">第一个插槽是first</div>
<div slot='two'>第二个插槽</div>
</have-name>
</div>
</template>
<script>
import haveName from '@/components/haveSlotName'
export default {
comments: {
haveName
}
}
</script>
子组件
<template>
<div>
<slot name="first"></slot>
<slot name="two"></slot>
<!-- 此处的p标签父组件没有给对应的slot和第一种方式的默认插槽，所以没有对应的内容 -->
<p>子组件</p>
</div>
</template>
视图展示内容
image.png
用法三：作用域插槽
由于Vue官方在2.6版本以后改变了插槽的书写方式，这次这里还是2.6以前的版本的使用，2.6以后的版本也兼容
父组件
<template>
<div>
<h3>作用域插槽学习</h3>
<have-name>
<div slot="first" slot-scope="scope">
{{scope.scopeData.name}}
</div>
</have-name>
</div>
</template>
<script>
import haveName from '@/components/scopeSlotName'
export default {
components: {
haveName
}
}
</script>
子组件
<template>
<div>
<slot name="first" :scopeData="scopeData"></slot>
</div>
</template>
<script>
export default {
data() {
return {
scopeData: {
name: '二狗',
year: 'three',
sex: '男'
}
}
}
}
</script>
视图展示内容
image.png
从上面三种情况可以看出，前两种插槽（默认插槽和具名插槽）的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；而作用域插槽就不同了，作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。
好了，以上是我对插槽用法的整理，如果有什么问题欢迎指出。
