uni-app学习笔记十三-vue3中slot插槽的使用

在页面开发中,通常一个页面分为头部,尾部,和中心内容区。其中头部,尾部一般比较固定,而中心区域往往是多样的,需要自定义开发。此时,我们可以引入slot(插槽)来实现这一目标。<slot> 作为一个占位符,父组件传递进来的内容就会渲染在这里。

下面使用slot来实现2个页面中心区域的差异化开发:

项目结构如下:

1.在项目组件components文件夹里新建一个组件:xxy-layout,在xxy-layout.vue文件写入下面的代码:

html 复制代码
<template>
	<view class="layout">
		<view class="header">header区</view>
		<view class="main">
			<slot></slot>
		</view>
		<view class="footer">底部区</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
    .layout{
		.header{
			height: 100px;
			background: #cfcfcf;
		}
		.main{
			min-height: 200px;
		}
		.footer{
			height: 120px;
			background: orange;
		}
	}
</style>

2.在demo1和demo2分别引入xxy-layout组件

demo1:

html 复制代码
<template>
	<view>
		<xxy-layout>
			<view class="row" v-for="item in 10">每一行{{item}}</view>
		</xxy-layout>
	</view>
</template>

demo2:

html 复制代码
<template>
	<view>
		<xxy-layout>
			<view class="box1"></view>
			<view class="box2"></view>
		</xxy-layout>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
  .box1{
	  width: 100px;
	  height: 100px;
	  background: yellowgreen;
  }
  .box2{
  	  width: 100px;
  	  height: 100px;
  	  background: yellow;
  }
</style>

从而实现中心区域的差异化

如果一个页面多处需要用到slot,就需要用到具名插槽。此时demo1和demo2还像上面写,将会失效。对上面xxy-layout.vue进行调整,分别在header和main引入slot,此时需要添加name以示区分。

html 复制代码
<view class="header">
	<slot name="header"></slot>
</view>
<view class="main">
	<slot name="main"></slot>
</view>
	

此时再来看页面,中间的内容消失了,demo2也是一样。

因此使用具名插槽后,需要对引入子组件部分进行调整,

方法1:通过template v-slot来实现

html 复制代码
<xxy-layout>
	<template v-slot:header>
		demo1头部
	</template>
	<template v-slot:main>
		demo1中心区
	</template>
</xxy-layout>

效果:

方法2:使用#插槽名称

html 复制代码
<xxy-layout>
	<template #header>demo2头部</template>
	<template #main>demo2中心区</template>
</xxy-layout>

效果:

相关推荐
百锦再9 小时前
从 .NET 到 Java 的转型指南:详细学习路线与实践建议
android·java·前端·数据库·学习·.net·数据库架构
卷Java9 小时前
uni-app 模板语法修复说明
java·数据库·spring boot·uni-app·mybatis
ASKED_20199 小时前
ChatGPT From Zero To Hero - LLM学习笔记(一)
笔记·学习·chatgpt
GoldenaArcher9 小时前
Postman 学习笔记 III:CLI 自动化测试与 Jenkins CI/CD 实践
笔记·学习·postman
一只小风华~10 小时前
命名视图学习笔记
前端·javascript·vue.js·笔记·学习
(●—●)橘子……10 小时前
记力扣2271.毯子覆盖的最多白色砖块数 练习理解
数据结构·笔记·python·学习·算法·leetcode
ThreeYear_s11 小时前
【FPGA+DSP系列】——(3)中断学习(以定时器中断为例)
单片机·学习·fpga开发
iOS阿玮11 小时前
国庆假期 iOS 开发者守好邮箱 “防线”,严防恶意投诉避免产品下架
uni-app·app·apple
00后程序员张11 小时前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
LFly_ice12 小时前
学习React-20-useId
前端·学习·react.js