【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>

此时页面效果 🧘‍♀️ :

相关推荐
海天胜景12 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘32 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾37 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端