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

此时页面效果 🧘‍♀️ :

相关推荐
玲小珑21 小时前
LangChain.js 完全开发手册(八)Agent 智能代理系统开发
前端·langchain·ai编程
蓝胖子的多啦A梦1 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼1 天前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
Bear on Toilet1 天前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
风若飞1 天前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑1 天前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia1 天前
如何找回Harbor密码
前端
码码哈哈0.01 天前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩1 天前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端
江城开朗的豌豆1 天前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js