[Vue] slot详解，slot、slot-scope和v-slot

插槽（solt）

1. 什么是插槽？

插槽就是父组件可以在子组件的指定位置插入html结构

2. 插槽的作用？

让用户可以拓展组件，去更好地复用组件和对其做定制化处理。
举一些例子，比如布局组件、表格列、下拉选项

3. 插槽的分类
   默认插槽
   具名插槽
   作用域插槽

默认插槽

子组件：插槽用slot标签来确定渲染位置，父组件未传入内容时，显示slot里面给的内容

父组件：直接在子组件的标签里面写入内容即可

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽

子组件:具名插槽用name属性标识插槽的名字，不传为默认插槽

父组件：父组件在默认插槽的基础上加slot属性，值为子组件name属性

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

作用域插槽
子组件：在作用域上绑定属性来讲子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scoped接收的对象上

父组件：通过slot-scope获取子组件的信息，在内容中使用。这里可以用解构语法直接获取想要的属性

父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

v-slot

在vue2.6中，上述的API被软废弃（3.0正式废弃），取而代之的是内置指令v-slot，可以缩写为#

• slot属性弃用，具名插槽通过指令参数v-slot:插槽名 的形式传入，可以简化为 #插槽名。
• slot-scope属性弃用，作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
• v-slot属性只能在上使用，但在【只有默认插槽时】可以在组件标签上使用

父组件中：
        <Category>
            <template #center>
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

拓展用法：

1. 同样可以通过解构获取v-slot={user},
   还可以重命名v-slot=“{user: newName}“和定义默认值v-slot=”{user = ‘默认值’}”
2. 插槽名可以是动态变化的 v-slot:[slotName]

注意：

1. 默认插槽名为default，可以省略default直接写v-slot，
   缩写为#时不能不写参数，写成#default（这点所有指令都一样，v-bind、v-on）
2. 多个插槽混用时，v-slot不能省略default