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> 
相关推荐
星哥说事7 分钟前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家35 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在38 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi1 小时前
Dokploy安装和部署项目流程
运维·前端
普通网友1 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢1 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端