Vue的slot插槽(默认插槽、具名插槽、作用域插槽)

news2024/11/22 16:49:48

目录

  • 1. slot插槽
    • 1.1 默认插槽
    • 1.2 具名插槽
    • 1.3 作用域插槽

1. slot插槽

作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件向子组件传递数据

1.1 默认插槽

Category.vue:

  • 定义一个插槽。等着组件的使用者进行填充
  • 可以在子组件Category.vue给插入的html结构定义CSS样式,也可以在父组件App.vue给插入的html结构定义CSS样式
<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 200px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

App.vue:直接在使用子组件的标签中,插入html结构,同时可以传递数据到html。如果子组件不定义slot插槽,则插入的html结构保存在子组件的$slots上

<template>
	<div class="container">
		<Category title="风景" >
			<img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
		</Category>

		<Category title="游戏" >
			<ul>
				<li v-for="(game,index) in games" :key="index">{{game}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['红色警戒','穿越火线']
			}
		}
	}
</script>

<style scoped>
	.container{
		display: flex;
    /*主轴对其,每个元素之间分配相同的空间*/
		justify-content: space-around;
	}
</style>

显示效果如下:
默认插槽效果

1.2 具名插槽

Category.vue:给slot定义name属性,区分不同的插槽

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot name="center">我是一些默认值,当使用者没有传递具体结构时,center插槽会出现</slot>
		<slot name="footer">我是一些默认值,当使用者没有传递具体结构时,footer插槽会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

App.vue:

  • 通过slot属性将html结构放入不同的slot插槽
  • 可以将多个标签直接放入相同name的插槽
  • 使用template可以将多个标签放入slot插槽,还不用多一层标签。v-slot只能在template标签上使用
<template>
	<div class="container">
		<Category title="风景" >
			<img slot="center" src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
      <!-- 可以将多个标签直接放入相同name的插槽 -->
			<a slot="footer" href="http://www.baidu.com">更多风景</a>
		</Category>

		<Category title="游戏" >
			<ul slot="center">
				<li v-for="(game,index) in games" :key="index">{{game}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.baidu.com">单机游戏</a>
				<a href="http://www.baidu.com">网络游戏</a>
			</div>
		</Category>

		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.baidu.com">经典</a>
					<a href="http://www.baidu.com">热门</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['红色警戒','穿越火线']
			}
		}
	}
</script>

<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

显示效果如下:
具名插槽

1.3 作用域插槽

理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。例如games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定

Category.vue:将多个属性以object的方式,传递给slot的使用者

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="游戏很好玩吧">我是默认的一些内容</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线'],
			}
		},
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 200px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
</style>

App.vue:slot的使用者接收数据,然后将数据以不同的html结构插入到slot插槽

<template>
	<div class="container">

		<Category title="游戏">
      <!-- slot的使用者接收数据 -->
			<template v-slot="obj">
				<ul>
					<li v-for="(game,index) in obj.games" :key="index">{{game}}</li>
				</ul>
        <h4>{{obj.msg}}</h4>
			</template>
		</Category>

		<Category title="游戏">
			<template v-slot="{games}">
				<ol>
					<li style="color:red" v-for="(game,index) in games" :key="index">{{game}}</li>
				</ol>
			</template>
		</Category>

		<Category title="游戏">
			<template v-slot="{games}">
				<h4 v-for="(game,index) in games" :key="index">{{game}}</h4>
			</template>
		</Category>

	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

效果如下:
作用域插槽

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2135848.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

先楫HPM6750 Windows下VSCode开发环境配置

用的是EVKmini&#xff0c;ft2232作为调试器jtag接口调试 启动start_gui.exe 以hello_world为例&#xff0c;更改一下build path&#xff0c;可以generate并使用gcc compile 最后会得到这些 点击start_gui里面的命令行&#xff0c;用命令行启动vscode 新建.vscode文件夹&…

html+css网页设计 旅游网站首页1个页面

htmlcss网页设计 旅游网站首页1个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#xff…

C++速通LeetCode简单第10题-翻转二叉树

递归法&#xff1a; class Solution { public:TreeNode* invertTree(TreeNode* root) {if (root nullptr) {return nullptr;}TreeNode* left invertTree(root->left);TreeNode* right invertTree(root->right);root->left right;root->right left;return roo…

位段、枚举、联合

位段 在一个结构体中以位&#xff08;最小单位&#xff09;为单位来指定其成员所占的内存长度。位段成员名后面有一个冒号&#xff0c;冒号后有一个数字&#xff08;这个数字是小于等于这个成员所占的位&#xff09;。 typedef struct S {char a : 2;//8char b : 8;//8char c …

基于学习功能聚合的英语口语学习APP

项目介绍 本系统提供文章及朗读的发布、学生跟读及自动评测等功能&#xff0c;促进英语口语学习。 主要包括: 文章朗读:发布文章内容及相应的朗读录音&#xff0c;设定打卡要求&#xff0c;并提供播放功能&#xff1b; 文章跟读:打卡,提供朗读音频播放功能,熟悉后进行跟读,自动…

[苍穹外卖]-11数据可视化接口开发

ECharts Apache ECharts是一款基于JavaScript的数据可视化图表库, 提供直观, 生动,可交互, 可定制的数据可视化图表 入门案例: 使用Echarts, 前端关注图表的配置, 不同的配置影响展示的效果, 后端关注图表所需要的数据格式 <!DOCTYPE html> <html><head>&l…

“架构建模驱动企业管理数字化转型大会”圆满落幕,上海斯歌发布重磅成果!

2024年 9 月 10 日&#xff0c;由上海博阳精讯信息科技有限公司&#xff08;后文简称“博阳精讯”&#xff09;与华为云计算技术有限公司主办&#xff0c;上海斯歌信息技术有限公司&#xff08;后文简称“上海斯歌”&#xff09;、北京凡得科技有限公司&#xff08;“后文简称凡…

【题解】CF1986G1

目录 翻译思路代码关于G2的想法 翻译 原题链接 思路 数据很大&#xff0c;显然两边同时处理&#xff0c;所以要从 p i i \frac{p_{i}}{i} ipi​​下手。   要让 p i i ∗ p j j \frac{p_{i}}{i} * \frac{p_{j}}{j} ipi​​∗jpj​​是整数&#xff0c;每个 p i i \frac{p_…

Leetcode 二叉树中根遍历

采用递归算法&#xff0c;并且用一个向量来存储节点值。 算法C代码如下&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}*…

GLSL 棋盘shader

今日永杰开金 float size 100.;vec2 checkerboard mod(floor(gl_FragCoord.xy / size), 2.);float c mod(checkerboard.x checkerboard.y, 2.);gl_FragColor vec4(vec3(c), 1);或 vec2 uv floor(S * p.xy * vec2(iResolution.x / iResolution.y, 1) / iResolution.xy); …

文件的常用操作

目录 一、文件的常用操作 1、创建文件 2、读文件 3、写文件 4、删除文件 一、文件的常用操作 1、创建文件 需求&#xff1a;在d盘的a目录下创建hi.txt文件&#xff0c;a目录已经创建好 # 需求&#xff1a;在d盘的a目录下创建hi.txt文件&#xff0c;a目录已经创建好 &qu…

RuoYi-Vue3使用minio图片预览不了的问题

参照官网配置好之后&#xff0c;图片预览不了 1、参照官网修改前端src\components\ImageUpload\index.vue 2、如果图片预览不了&#xff0c;发现是Minio后台返回的url地址内部包括逗号 与代码里split(",")冲突了&#xff0c; 解决方法是改成分号 多个图片可以预览了…

重大消息!LLMWorld 推出开源应用广场,100 多个前沿 AI 应用引关注

宝藏网站LLM World 上线了开源应用广场&#xff0c;汇聚了 100 多个前沿的 AI 应用。 开源应用的出现降低了技术门槛&#xff0c;无论是专业开发者还是普通爱好者&#xff0c;都能在此轻松接触先进的人工智能技术&#xff0c;进行学习和实践。 期待 LLMWorld 能持续汇聚更多优…

在Linux系统中如何创建一个新用户

在Linux系统下创建一个新用户既可以用图形桌面系统&#xff0c;也可以用字符终端命令行的方式来建立。 一、在图形桌面下建立一个新用户“xiaodu”。 如图1&#xff0c;打开设置界面&#xff0c;选中“账户”选项。 图1 选中账户选项 进入“账户”选项后&#xff0c;如图2&a…

初学者指南:如何在Windows 11中自定义任务栏颜色,全面解析!

Windows任务栏如何修改颜色&#xff1f;任务栏可以说是电脑桌面上比较不“起眼”的东西&#xff0c;但是也有不少小伙伴会想要将自己的电脑任务栏设置得好看&#xff0c;比如说修改电脑任务栏透明度&#xff0c;以及修改任务栏颜色。 电脑任务栏设置可以修改任务栏颜色&#xf…

mysql学习教程,从入门到精通,SQL ORDER BY 子句(14)

1、SQL ORDER BY 子句 在本教程中&#xff0c;您将学习如何对SELECTSQL查询返回的数据进行排序。 1.1、对结果集排序 通常&#xff0c;当您使用SELECT语句从表中获取数据时&#xff0c;结果集中的行没有任何特定的顺序。如果要按特定顺序排列结果集&#xff0c;则可以在语句…

镜舟科技与中启乘数科技达成战略合作,共筑数据服务新生态

当今企业数据管理日益规范化&#xff0c;数据应用系统随着数据类型与数量的增长不断细分&#xff0c;为了提升市场竞争力与技术实力&#xff0c;数据领域软件服务商与上下游伙伴的紧密对接与合作显得尤为重要。通过构建完善的生态系统&#xff0c;生态内企业间能够整合资源、共…

只有C盘的windows系统通过磁盘分区分出D盘

为什么要从C盘中分出D盘&#xff1f; windows电脑的一个良好的操作规范是&#xff1a;C盘是系统盘&#xff0c;D盘是软件盘&#xff0c;E盘是数据盘&#xff0c;软件一般安装在D盘&#xff0c;大家的一些数据资料可以放在E盘&#xff0c;软件大家一般按照在C盘系统盘&#xff…

GD - GD32350R_EVAL - PWM实验和验证3 - EmbeddedBuilder - 无源蜂鸣器 - 用PMOS来控制

文章目录 GD - GD32350R_EVAL - PWM实验和验证3 - EmbeddedBuilder - 无源蜂鸣器 - 用PMOS来控制概述笔记失败图成功图蜂鸣器管脚波形总结END GD - GD32350R_EVAL - PWM实验和验证3 - EmbeddedBuilder - 无源蜂鸣器 - 用PMOS来控制 概述 以前做了一个实验&#xff0c;用PMOS来…

电阻、电容、电感的封装大小分别与什么参数有关?

电阻封装大小与电阻值、额定功率有关&#xff1b; 电容封装大小与电容值、额定电压有关&#xff1b; 电感封装大小与电感量、额定电流有关。