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> 
相关推荐
昔人'4 分钟前
css`min()` 、`max()`、 `clamp()`
前端·css
鹏多多14 分钟前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js
一只小风华~23 分钟前
Vue: 侦听器(Watch)
前端·javascript·vue.js
JarvanMo23 分钟前
Flutter Debug模式:每个开发者都需要的秘密武器(但大多数人用错了)
前端
玲小珑35 分钟前
LangChain.js 完全开发手册(八)Agent 智能代理系统开发
前端·langchain·ai编程
蓝胖子的多啦A梦39 分钟前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼40 分钟前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
风若飞1 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑1 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia1 小时前
如何找回Harbor密码
前端