Vue3 插槽 - 技术栈

插槽，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。插槽又分为具名插槽、匿名插槽和作用域插槽。

1)默认插槽：默认插槽就是指没有名字的插槽，子组件未定义名字的插槽（默认插槽），父级会把未指定插槽名字的填充内容填到默认插槽中(父填到子)。

例如：我有两个页面，左右两边的内容是固定的，中间的内容是不固定的，就可以使用默认插槽。

子：

html 复制代码

使用：<slot></slot>

html 复制代码

<template>
	<view class="header">
		<view class="left">
			左
		</view>
		<view class="center">
			<slot></slot>
		</view>
		<view class="right">
			右
		</view>
	</view>
</template>

父：

html 复制代码

使用：<template>xxx</template>

html 复制代码

<template>
	<view>
	<lwq-layout>slot1的中间</lwq-layout>
	</view>
</template>

运行结果：

2)具名插槽：具名插槽就是给插槽取一个名字，一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件在填充内容的时候，可以根据这个名字把内容填到对应的插槽中。

v-slot:缩写可以缩写为# 如：v-slot:left, 可以为#left

例如：我有两个页面，中间的东西是固定的，左右两边是不固定的。

子：

html 复制代码

使用：<slot name="left"></slot>

html 复制代码

<template>
	<view class="header">
		<view class="left">
			<slot name="left"></slot>
		</view>
		<view class="center">
			标题
		</view>
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

父：

html 复制代码

使用：<template v-slot:left或者#left>

html 复制代码

<template>
	<view>
	<lwq-layout>
		<template v-slot:left>我是传入的左边</template>
		<template #right>我是传入的右边</template>
		</lwq-layout>
	</view>
</template>

运行结果：

3）作用域插槽：其实就是带数据的插槽（子给父），即带参数的插槽，简单来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用。父组件可以根据子组件传过来的插槽数据来进行不同方式的展现和填充插槽内容。

html 复制代码

子：<slot :data="data"></slot>

html 复制代码

父： <template v-slot="user">
          <view>
            <span v-for="item in user.data">{{item}}</span>
          </view>
        </template>

例如：element-ui里面获取当前行的值

html 复制代码

<el-table :data="employeeList">
          <el-table-column prop="formOfEmployment" label="聘用形式" align="center">
          //解构（｛row｝）
            <template v-slot="{ row }">
              <span v-if="row.formOfEmployment === 1">正式</span>
              <span v-else-if="row.formOfEmployment === 2">非正式</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
</el-table>