插槽的使用：可以把插槽理解为组件B中留下的一个坑，谁用这个坑谁就可以往里面填放东西，同时呢，谁也就要认组件B做儿子-----组件B也就成了这个来填坑的组件的子组件。
插槽不单单是可以让父组件用它填充东西，也可以引用子组件的数据，而父组件用坑的时候也就可以用子组件传过来的数据。
单个插槽（默认插槽、匿名插槽）
子组件：(child.vue)
<template> <div> <h2>子组件</h2> <slot> <h3> 匿名插槽(●ˇ∀ˇ●)</h3> </slot> </div> </template> <script> export default { name: 'child', } </script>
父组件：(father.vue)—既然使用子组件的插槽就的先import引入子组件
//只引用了子组件，但是没有使用子组件的插槽，那么插槽中如果有内容会默认显示出来 <template> <div> <h2>我是爸爸~</h2> <!--使用子组件--> <child></child> </div> </template> <script> import childfrom './child.vue' export default { components: { child}, } </script>
只引用了子组件，但是没有使用子组件的插槽，那么插槽中如果有内容会默认显示出来
使用子组件的插槽，父组件要填坑了（**给子组件里面加 ），子组件不变，父组件修改代码如下：
<template> <div> <h2>我是爸爸~</h2> <!--使用子组件--> <child> <template> <h4>--------给我儿子填坑--------</h4> </template> </child> </div> </template> 会发现：子组件代码不变，父组件使用给<template>中加入了一段文字， 这段文字直接把子组件中的<slot>插槽中的文字替换了。 ——如果子组件有插槽而父组件使用子组件但不使用插槽， 插槽内容默认展示；如果父组件使用了插槽，以父组件的填充内容为主
具名插槽（有具体名字，有标识的插槽）可以根据名字来有针对性的使用插槽
子组件：(child.vue)
<template> <div> <h2>子组件</h2> <slot name="slot-fruits"> <h3>这儿放水果！</h3> </slot> <hr> <slot name="slot-foods"> <h3>这儿放美食！</h3> </slot> </div> </template>
//父组件 <template> <div> <h2>我是爸爸~</h2> <child> <div slot="slot-fruits"> <p>葡萄柚</p> <p>猕猴桃</p> </div> <div slot="slot-foods"> <h5>饺子</h5> <h5>意大利面</h5> </div> <!--注意：Vue3中要用v-slot去指向插槽名：<div v-slot=slot-foods> --> </child> </div> </template>
注：可以看到只是在使用子组件时，向其内部的结构标签div中加上了slot属性并指向了子组件中定义的插槽的插槽名，就把这个div按照对应的插槽名替换成子组件中的插槽了，如果把多个结构都指向了同一个插槽名，那么会把这些数据都渲染出来，后面的不会覆盖前面的
作用域插槽（可视为携带数据的匿名插槽）没名，但可以携子组件的数据带给父组件
子组件：（通过 :数据别名=“数据” 来给到插槽，将数据绑定给这个插槽）
<template> <div> <h2>子组件</h2> <slot :fruits="Fruits"> 水果来啦！ </slot> </div> </template> <script> export default { name: 'child', data() { return { Fruits: { 'warmFruit':[ ['红果','草莓', '红心火龙果', '红皮苹果', '圣女果'], ['黄果','香蕉', '菠萝', '黄桃', '葡萄柚', '柠檬'], ['橙果','橙子', '沙糖桔', '橘子'], ], 'coolFruit':[ ['黑果','东北冻梨', '黑枣'], ['蓝果','蓝莓', '蓝靛果'], ['紫果','飓风葡萄', '西梅', '桑葚', '黑布林李子'], ], }, } }, } </script> <style> </style>
父组件：（通过给template加 slot-scope 属性）
这里会将slot-scope属性的属性值作为一个对象-----用于保存子组件插槽中绑定的数据
这个用于保存插槽数据的slot-scope的属性值要通过子组件插槽定义的数据别名来访问数据
<template> <div> <h2>看看儿子给我带什么来了~</h2> <child> <!--通过slot-scope来定义一个对象scope（名字可以随便起）来接收子组件传递过来的数据--> <template slot-scope="scope"> <!--使用插值表达式直接把接收到的插槽数据渲染到页面（scope保存数据，所以真正的数据在scope的下一层）--> {{ scope.fruits }} </template> </child> </div> </template> <script> import childfrom './child.vue' export default { components: { child }, } </script> <style> </style>
父组件对插槽带来的数据进行遍历，并将数组元素渲染到页面上
<template> <div> <h2>看看儿子给我带什么来了~</h2> <child> <template slot-scope="scope"> <!--通过层层对象指定获取到目标数据--> <p v-for="(warmItem,index) in scope.fruits.warmFruit" :key="index"> <span v-for="(item,index) in warmItem" :key="index">{{item}}、</span> </p> <hr> <p v-for="(coolItem,index) in scope.fruits.coolFruit" :key="index"> <span v-for="(item,index) in coolItem" :key="index">{{item}}、</span> </p> </template> </child> </div> </template>
