Vue 之插槽--基本使用、具名插槽、作用域插槽

场景提要：
当在同一个页面中多次使用到同一个组件时，或者多个页面使用同一个组件但是需要完成各自的新增内容时，在被使用的组件中添加插槽便成为了一个轻松简化工作的步骤

1、插槽的基本使用（不带默认值）

使用场景描述：对原组件提供的内容感到不足，需要自主增加新内容

该方式适用于对引用的组件进行需要大量修改时

1.1 首先，你要有一个自定义组件，这里为 Two.vue

为了使例子看起来更加贴合实际情况，在 Two.vue 中写了较多的内容，不要觉得眼花缭乱，哈哈~~

<template>
	<div class="two">
		<h2>这是一个组件模块，这一行是组件模块的默认内容</h2>
		<!-- 固定内容：内容不可修改 -->
		<h6>这是一个组件模块，这一行是组件模块的默认内容，下面是一些默认功能（显示一张表格）</h6>
		<div style="width: 500px; margin: auto;">
			<el-table :data="tableData" style="width: 500px;margin: 10px 0;">
				<el-table-column label="姓名" prop="name"></el-table-column>
				<el-table-column label="性别" prop="sex"></el-table-column>
				<el-table-column label="年龄" prop="age"></el-table-column>
			</el-table>
		</div>
		<!-- 插槽：可修改 -->
		<slot></slot>
	</div>
</template>

1.2 然后，找到那个多次引用组件Two.vue的页面（或者组件B）

<template>
	<div class="one">
		<h1>这里是主页</h1>>
		<!-- 第一次引用，直接使用组件 -->
		<two></two>
		<!-- 第二次引用，增加需求 -->
		<Two>
			<h3>这是在使用组件时新增的内容</h3>
			</el-input><el-button type="success">导出表格</el-button>
		</Two>
	</div>
</template>

<script>
	import Two from './Two.vue'
	export default {
		data(){
			return{}
		},
		components: {
			Two
		}
	}
</script>

效果展示
在这里插入图片描述

2、带默认值的插槽

该方式适用于需要对引用的组件进行少量修改时

1.1 首先，写一个组件 Two.vue

为了使例子看起来更加贴合实际情况，在 Two.vue 中写了较多的内容，不要觉得眼花缭乱，哈哈~~

<template>
	<div class="two">
		<!-- 固定内容：内容不可修改 -->
		<h6>这是一个组件模块，这一行是组件模块的默认内容，下面是一些默认功能（显示一张表格）</h6>
		<div style="width: 500px; margin: auto;">
			<el-table :data="tableData" style="width: 500px;margin: 10px 0;">
				<el-table-column label="姓名" prop="name"></el-table-column>
				<el-table-column label="性别" prop="sex"></el-table-column>
				<el-table-column label="年龄" prop="age"></el-table-column>
			</el-table>
		</div>
		<!-- 插槽：可修改 -->
		<slot>
			<h3>这里是组件模块内的插槽，这一条是插槽内的默认内容</h3>
			<el-row>
			<span>搜索框：</span><el-input style="width: 200px;margin: 0 10px;"></el-input><el-button type="primary">搜索</el-button>
			</el-row>
		</slot>
	</div>
</template>

1.2 然后，引用这个组件

此处为在同一个页面多次引用该组件，这里引用了两次（实际场景中可引用次数可能会很多，比如电商商品展示区），一次直接引用未作修改，一次有修改

<template>
	<div class="one">
		<h1>这里是主页</h1>
		<!-- 第一次引用，直接使用组件 -->
		<two></two>
		<!-- 第二次引用，对组件进行修改 -->
		<Two><h3>这是在使用组件时修改的内容</h3></el-input><el-button type="success">导出表格</el-button></Two>
	</div>
</template>

<script>
	import Two from './Two.vue'
	export default {
		data(){
			return{}
		},
		components: {
			Two
		}
	}
</script>

效果图展示，箭头指向处为未修改与修改对比
在这里插入图片描述

3、具名插槽–搜索框

给插槽一个 name

当想要指定修改某个插槽时，可以给插槽们指定一个 name 属性，然后通过 name 属性对插槽内容进行修改
很典型的一个案例是：顶部栏
具体就不实现了，图上代码逻辑很清晰了，嘿嘿~~
在这里插入图片描述

4. 作用域插槽

说到作用域插槽呢，先来说一下“作用域”
1、作用域
在哪个模块下，作用域就是哪个模块，相应的数据也是对应模块下的数据
官方准则：父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译

补充：var 没有作用域（全局），let 和 const 有作用域

2、作用域插槽

父组件替换插槽的标签，内容由子组件提供

情形一：在引用组件的地方进行数据处理

这里将两个组件的代码写一起了，请注意区分

// 组件Two.vue
<template>
	<div class="two">
		// :data="list"中data取名自定义（绑定的list为本组件data内的数据）
		<slot :data="list">
		  <ul><li v-for="item in list">{{item}}</li></ul>
		</slot>
	</div>
</template>

// 引用Two.vue的组件B
<template>
	<div class="one">
		<h1>这里是主页</h1>>
		<!-- 第一次引用，直接使用组件 -->
		<two></two>
		<!-- 第二次引用，处理数据 -->
		<Two>
			// slot-scope="slot"中的slot取名自定义，slot.data中的data为被引用的组件Two.vue中的自定义命名
			<template slot-scope="slot">
			  <span v-for="item in slot.data">{{item}}</span>
			</template>
		</Two>
	</div>
</template>