【VUE 具名插槽的应用】

具名插槽类似于提前将布局安排好,但内容为空,一旦有具体内容填充进来,可以很和谐的展示,不影响整体效果。🍇

"举个🌰:系统里大部分页面的查询条件是相同的,所以需要封装一个公用的查询条件组件

但是又有个别页面比原来的查询条件多几个,此时具名插槽就能很好解决这个问题"

一、具名插槽未填充内容时

子组(child)件代码如下:
组件里现在预定义了两个具名插槽

javascript 复制代码
<el-form :model="form" label-width="100px">
			<el-form-item label="姓名">
				 <el-input placeholder="请输入内容" v-model="form.name" clearable />
			</el-form-item>
			<el-form-item label="年纪">
				 <el-input placeholder="请输入内容" v-model="form.age" clearable />
			</el-form-item>
			<slot name="otherItem"></slot>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search">查询</el-button>
				<slot name="otherButton"></slot>
			</el-form-item>
</el-form>

父组件代码如下:

简单的直接引用

javascript 复制代码
<child></chlid>

页面效果🍑:

二、给插槽填充内容

template 分别给两个具名插槽填充了内容

javascript 复制代码
<child>
	<template v-slot:otherItem>
		<el-form-item label="职业">
			 <el-input placeholder="请输入内容" v-model="form2.career" clearable />
		</el-form-item>
		<el-form-item label="住址">
			 <el-input placeholder="请输入内容" v-model="form2.address" clearable />
		</el-form-item>
	</template>
	<template v-slot:otherButton>
		<el-button type="primary" icon="el-icon-download">下载文件</el-button>
	</template>
</child>

此时页面效果 🧘‍♀️ :

相关推荐
Bunury1 分钟前
element-plus添加暗黑模式
开发语言·前端·javascript
心走6 分钟前
八股文中TCP三次握手怎么具象理解?
前端·面试
Aiolimp15 分钟前
React常见Hooks使用(二)
前端·react.js
By北阳15 分钟前
CSS 中实现 div 居中有以下几种常用方法
前端·css
在广东捡破烂的吴彦祖17 分钟前
window配置Flutter开发环境
前端·flutter
辣椒粉丝20 分钟前
记rspack想提issuse,提太慢白嫖不上了
前端·javascript
腰间盘突出的红利22 分钟前
npm组件库搭建
前端
火星思想22 分钟前
前端基础布局写法详解:左右、左中右及弹性布局实践
前端·css
小桥风满袖22 分钟前
Three.js-硬要自学系列10 (创建纹理贴图、自定义顶点UV坐标)
前端·css·three.js
七月丶25 分钟前
🧼 为什么我开始在项目里禁用 CSS 文件?
前端·javascript·后端