以下内容均是2.0版本vue中插槽的用法，3.0版本中写法不完全一样，有增加一些内容，并且2.0版本中的很多属性已被弃用！slot-scope scope方法已被弃用，作用域插槽3.0写法是不一致的。
首先我们要搞明白插槽是干什么用的，就是当你使用编写组件时，组件里面的内容不完全相同时，如果疯狂使用v-show或者v-if来控制不同的组件展示不同的内容会有些许的麻烦，插槽就相当于是在父组件页面中的子组件标签里面编写一段代码，然后这段代码会被插入到子组件里面，但是子组件本身是有dom元素的，所以插入的时候需要根据slot标签的位置来决定插入的位置，又或者是根据slot的名称来确定。
插槽分为三种：
1.默认插槽
个人理解，就相当于是组件中无法公用的部分需要通过插槽的方式来进行插入到子组件里面，代码如下
父组件代码：
<template>
<div class="list">
<category title="类目一">
<h3>类目一的自定义内容</h3>
</category>
<category title="类目二">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</category>
<category title="类目三">
<div>类目三的自定义内容</div>
</category>
</div>
</template>
<script>
import category from "./components/category.vue";
export default {
name: "App",
components: {
category,
},
};
</script>
子组件代码：
<template>
<div class="category">
<h3>{{title}}</h3>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'category',
props:{
title:null,
}
}
</script>
2.具名插槽
就比如我上方的代码想要添加两个插槽要怎么做？就相当于是需要给插槽加一个名字，子页面相对应的部分改成template外加 v-slot:名字这种方式，slot=" 名字"这种在vue3.0版本中已弃用！
父组件代码：
<template>
<div class="list">
<category title="类目一">
<template v-slot:center>
<h3>类目一插槽中间</h3>
</template>
<template v-slot:footer>
<h4>类目一插槽底部</h4>
</template>
</category>
<category title="类目二">
<template v-slot:center>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</template>
<template v-slot:footer>
<h4>类目二插槽底部</h4>
</template>
</category>
<category title="类目三">
<template v-slot:center>
<h3>类目三插槽中间</h3>
</template>
<template v-slot:footer>
<h4>类目三插槽底部</h4>
</template>
</category>
</div>
</template>
<script>
子组件代码：
<template>
<div class="category">
<h3>{{title}}</h3>
<slot name="center"></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: 'category',
props:{
title:null,
}
}
</script>
3.作用域插槽
就相当于在数据在子组件里面，但是不公用的代码结构在父组件中，父组件需要拿到子组件的数据，这个时候就需要用到作用域插槽。
父组件代码：
<template>
<div class="list">
<category title="类目一">
<template slot-scope="{ listData }">
<!-- {{categoryData}} -->
<ul>
<li v-for="(item, index) in listData" :key="index">{{ item }}</li>
</ul>
</template>
</category>
<category title="类目二">
<template slot-scope="{ listData }"> //结构赋值，这里拿到的数据是一个对象
<ol>
<li v-for="(item, index) in listData" :key="index">{{ item }}</li>
</ol>
</template>
</category>
</div>
</template>
<script>
import category from "./components/category.vue";
export default {
name: "App",
components: {
category,
},
};
</script>
子组件代码：
<template>
<div class="category">
<h3>{{ title }}</h3>
<slot :listData="listData"></slot>
</div>
</template>
<script>
export default {
name: "category",
props: {
title: null,
},
data() {
return {
listData: ["游戏", "电影", "综艺", "纪录片"],
};
},
};
</script>
