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

此时页面效果 🧘‍♀️ :

相关推荐
蔓越莓几秒前
[Electron] win.setSize 在RTL布局下的表现,是否需要适配?
前端·electron
Json_5 分钟前
Vue 实例方法
前端·vue.js·深度学习
数据攻城小狮子6 分钟前
Java Spring Boot 与前端结合打造图书管理系统:技术剖析与实现
java·前端·spring boot·后端·maven·intellij-idea
阿鲁冶夫19 分钟前
最佳实践初始化项目公用cli
前端
Json_33 分钟前
实例入门 实例属性
前端·深度学习
Json_34 分钟前
JS中的apply和arguments小练习
前端·javascript·深度学习
Light601 小时前
深入剖析JavaScript多态:从原理到高性能实践
javascript·性能优化·多态·类型推断·代码复用·v8引擎
云只上1 小时前
前端界面在线excel编辑器 。node编写post接口获取文件流,使用传参替换表格内容展示、前后端一把梭。
前端·javascript·node.js·excel
Json_1 小时前
Vue Methods Option 方法选项
前端·vue.js·深度学习
刘 怼怼1 小时前
使用 Vue 重构 RAGFlow 实现聊天功能
前端·vue.js·人工智能·重构