slot的含义和使用场景_标签

一、slot是什么

在HTML中slot元素，是Web组件里面的一个占位符，该占位符可以在后期使用自己的标记语言填充

slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口

二、使用场景

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

三、分类

slot可以分为以下3种：

1.默认插槽

2.具名插槽

3.作用域插槽

默认插槽

子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面父组件在使用的时候，直接在子组件的标签内写入内容即可

//子组将中
<template>
    <div>
        <h2>子组件 插槽使用</h2>
	//在子组件中为插槽预留位置
        <slot></slot>    
	
        //默认内容，插槽还可以使用默认内容，在不传递值时显示默认内容的值
	<solt>默认内容</solt> 
    </div>
</template>
 
 
//父组将中使用
import Slotdemo from "./soltDemo.vue";
components: {Slotdemo},
    
<template>
    <div>
        <!-- 插槽使用 -->
        <Slotdemo>
            <div class="solt">
                <div>
                    <el-input placeholder="请输入内容"></el-input>
                </div>
            </div>
        </Slotdemo>
    </div>
</template>

具名插槽

子组件用name属性来表示插槽的名字，不传为默认插槽

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

子组件

//子组件中
<template>
    <div>
        <!-- 具名插槽 -->
        <slot name="title">
            title具名插槽默认内容
        </slot>
        <div>
            <slot name="count">
                count具名插槽默认内容
            </slot>
        </div>
    </div>
</template>
 
 
//父组件中使用
         import Slotdemo from "./soltDemo.vue";
	 components: {Slotdemo},
        <!-- 具名插槽使用 -->
        <!-- 注意：具名插槽一定要在外面包裹一层 template 并在其上面使用  v-solt=" " 属性来指定插槽名称-->
        <Slotdemo>
             
            <template v-solt="title">     
                <div>title具名插槽 向名字为title的插槽插入内容</div>
            </template>
 
            <template v-solt="count">
                <div>count具名插槽 向名字为count的插槽插入内容</div>
            </template>
        </Slotdemo>

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

子组件

//子组件中使用 solt 插槽将数据 传递至父组件
 
<template>
    <div>
        <slot :list="list"></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: ['张三', '李四', '王五']
        }
    },
}
</script>
 
 
//父组件中使用作用域插槽
	import Slotdemo from "./soltDemo.vue";
	components: {Slotdemo},
        
        <!-- 作用域插槽 -->
        <!-- 作用域插槽的使用必须要在子组件标签上面使用v-slo 获取到作用域插槽在子组件中的值再在后续中使用 -->
        <Slotdemo v-slot="{ list }">
            <!-- 作用域插槽 -->
            <ol>
                <li v-for="item in list" :key="item.id">
                    {{item.count}}
                </li>
            </ol>
        </Slotdemo>

小结：

• v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用
• 默认插槽名为default，可以省略default直接写v-slot
• 缩写为#时不能不写参数，写成#default
• 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"