插槽也是用于vue间创建的数据的一种方式，一般都是传递html元素。比如可以用于定义一个带样式的title等

• 默认插槽：没有name的插槽

----父组件------
<template><div><TypeCom><!-- 如果这里的注释放开，那么子组件中默认的i标签就会被覆盖 --><!-- <span>这是新加的</span> --></TypeCom></div>
</template>-----子组件-----
<template><div><p>这是本来就有的</p><slot><i>如果在用此组件的地方没有传递html，则显示默认的</i></slot></div>
</template>

• 具名插槽：顾名思义，有名字的插槽。用于多个插槽的地方

-----子组件-----
<template><div><p>这是本来就有的</p><slot name="title"><i>如果在用此组件的地方没有传递html，则显示默认的</i></slot><slot name="content">这是默认的内容</slot></div>
</template>-----父组件-----
<template><div><TypeCom><template slot="title">新的title</template><!-- 直接写slot=""和v-slot：是一样的，v-slot语法是2.6.0以后的 --><template v-slot:content><div>这是新的content</div></template></TypeCom></div>
</template>

• 作用域插槽：一般是用来父组件要根据子组件的值做显示。假如在子组件里有有一些数据，父组件要拿到这些数据，做不同的处理

---子组件----
<template><div><p>这是本来就有的</p><slot name="title" :arrData1="arr"><i>如果在用此组件的地方没有传递html，则显示默认的</i></slot><slot name="content" :arrData2="arr">这是默认的内容</slot></div>
</template><script>
export default {data() {return {arr: ['小明', '小红', '小李', '小文']}}
}
</script>-----父组件------
<template><div><TypeCom><template slot="title" slot-scope="data1"><h4 v-for="item in data1.arrData1" :key="item">{{ item }}--title</h4></template><template  #content="data2"><!--<template  v-slot:content="data2"> 等同于上面写法，上面是2.6.0后的新语法，这三种写法都可以 --><!-- 等同于 <template #content="{arrData2}">，拿到arrData2之后，进行结构--><ul v-for="con in data2.arrData2" :key="con"><li>{{ con }}---content</li></ul></template></TypeCom></div>
</template>