Vue中的插槽——默认插槽、具名插槽、作用域插槽

一、插槽

• 使用插槽的目的在于，使组件更具有扩展性。
• 例如，在组件中的某个位置，我们有时候需要一个botton、有时候需要一个input、有时需要一个span，但是他们之间的结构是相同的，这时候我们就可以使用到插槽。我们可以将共性抽取到组件中，将不同暴露为插槽，一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
• 插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。
• 插槽就是组件中提供给父组件使用的一个占位符，用 < slot >< /slot > 表示，父组件可以在这个占位符中填充任何模板代码，如HTML组件等，填充的内容会替换子组件的 < slot >< /slot > 标签，简单理解就是子组件中留下一个"坑"，父组件可以使用指定的内容来补"坑"。
• slot插槽的使用：子组件预留slot位置，父组件在使用子组件时，在子组件标签中定义的内容，将渲染在slot的位置除；如果不定义，则不显示插槽。
• 父组件定义要插入到子组件插槽的内容，并不一定是dom结构类型，也可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽的内容，就会把内容填充进去。
• slot 插槽有三种：默认插槽、具名插槽、作用域插槽。

二、默认插槽

• 默认插槽，又称为匿名插槽，不用设置名称属性，单个插槽可以放置在组件的任意位置。

// 子组件中
<template>
	<div>
		<h2>子组件 插槽使用</h2>
		//在子组件中为插槽预留位置
		<slot></slot>
		//默认内容，插槽还可以使用默认内容，在不传递值时显示默认内容的值。
		<slot>默认内容</slot>
	</div>
</template>


//父组件中
components:{Slotson}
<template>
	<div>
		//插槽的使用
		<Slotson>
			<template class="slot">
				<div>
					<el-input placeholder="请输入内容"></el-input>
				</div>
			</template>
		</Slotson>
	</div>
</template>


	//子组件中
    <el-table
    ref="tabRef"
    v-bind="$attrs" 
    v-on="$listeners"
    style="width: 100%">
        <slot></slot>
    </el-table>
    
       //父组件中
		<ComTable 
            :data="logTableData"
            width="100%"
            :height="`calc(100vh - 310px)`">
            <el-table-column label="商家/用户名称" prop="name"> </el-table-column>
            <el-table-column label="类型" prop="type">
              <template slot-scope="{row}">
                <span>{{ row.type=='1'?"商家":"用户" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="指令名称" prop="itemName"> </el-table-column>
            <el-table-column label="操作类型" prop="operateType"> 
              <template slot-scope="{row}">
                <span>{{ row.operateType=='1'?"授权":"取消授权" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="授权账号" prop="operateName"> </el-table-column>
            <el-table-column label="操作时间" prop="operateTime">
              <template slot-scope="{row}">
                <span>{{ row.operateTime.replace("T"," ") }}</span>
              </template>
            </el-table-column>
          </ComTable>

三、具名插槽

• 当子组件功能复杂时，子组件的插槽可能并非一个，这个时候就需要给slot指定一个name属性，也就是具名插槽。

//子组件中
<template>
	<div>
		//具名插槽
		<slot name="title">
			title具名插槽默认内容
		</slot>
		<div>
			<slot name="count">
				count具名插槽默认内容
			</slot>
		</div>
	</div>
</template>

//父组件中使用
components:{Slotson}
<template>
	<div>
		//具名插槽的使用
		<Slotson>
			//具名插槽一定要在外面包裹一层template并在其上面使用v-slot属性来指定插槽名称
			<template v-slot="title">
				<div>title具名插槽 向名字为title的插槽插入内容</div>
			</template>

			<template v-slot="count">
				<div>count具名插槽 向名字为count的插槽插入内容</div>
			</template>
		</Slotson>
	</div>
</template>

四、作用域插槽

• 我们可以将其叫做带数据的插槽，父组件在使用的时候可以替换slot插槽中的显示页面结构，但展示的数据还是来源于子组件。
• 当数据在子组件中，但是插槽中渲染数据的节点由父组件决定，这种情况下，就需要使用作用域插槽。

//子组件中使用slot 插槽将数据传递至父组件
<template>
	<div>
		//作用域插槽
		<slot :list="list"></slot>
	</div>
</template>
<script>
export default{
	data(){
		return {
			list:["张三","李四","王五"]
		}
	}
}
</script>

//父组件中使用作用域插槽
components:{Slotson}
<template>
	<div>
		//作用域插槽的使用
		//作用域插槽的使用必须在子组件标签上使用v-slot 获取到作用域插槽在子组件中的值再在后续中使用
		<Slotson  v-slot="{list}">
			//作用域插槽
			<ol>
				<li v-for="item in list" :key="item.id">
					{{item.count}}
				</li>
			</ol>
		</Slotson>
	</div>
</template>