Vue-52、Vue技术插槽使用

news2024/12/24 11:37:41

1、默认插槽

App.vue

<template>
    <div class="container">
        <category title="美食">
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.F0xLT-eKcCSOI5tdjBv9FAHaE8?w=303&h=202&c=7&r=0&o=5&pid=1.7">
        </category>
        <category title="游戏"  >
            <ul>
                <li v-for="(p,index) in games" :key="index">{{p}}</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{
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超近玛丽'],
                films:['《教父》','《拆弹专家》','《你好李焕英》','《龙门客栈》'],
            }
        }
    }
</script>
<style scoped>
    .container{
        display: flex;
        justify-content: space-around;
    }
    img{
        width: 120%;
        margin-left: -36px;
    }
    video{
        width: 120%;
        margin-left: -36px;
    }
</style>

Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <ul>
            <!--定义一个插槽（挖个坑，等着组件的使用者进行填充）-->
            <slot>我是一个默认值，当使用者没有传递具体结构时，我会出现</slot>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props:['title'],
        data(){
            return{

            }
        }
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h3{
        text-align: center;
        background-color: orange;
    }
</style>

效果
在这里插入图片描述
2、具名插槽

App.vue

<template>
    <div class="container">
        <category title="美食">
            <img slot="center" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.F0xLT-eKcCSOI5tdjBv9FAHaE8?w=303&h=202&c=7&r=0&o=5&pid=1.7">
            <a slot="footer" href="https://www.baidu.com">更多美食</a>
        </category>
        
        <category title="游戏"  >
            <ul slot="center">
                <li v-for="(p,index) in games" :key="index">{{p}}</li>
            </ul>
          <div class="foot" slot="footer">
              <a  href="https://www.baidu.com">单机游戏</a>
              <a  href="https://www.baidu.com">网络游戏</a>
          </div>
        </category>
        <category title="电影"   slot="footer">
            <video  slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
            <div slot="footer" class="foot">
                <a  href="https://www.baidu.com">经典</a>
                <a  href="https://www.baidu.com">热门</a>
                <a  href="https://www.baidu.com">推荐</a>
            </div>
            <h4 slot="footer">欢迎来看电影</h4>
        </category>
    </div>
</template>
<script>
    import Category from './components/Category'
    export default {
        name: 'App',
        components: {
            Category
        },
        data(){
            return{
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超近玛丽'],
                films:['《教父》','《拆弹专家》','《你好李焕英》','《龙门客栈》'],
            }
        }
    }
</script>
<style scoped>
    .container{
        display: flex;
        justify-content: space-around;
    }
    img{
        width: 120%;
        margin-left: -36px;
    }
    video{
        width: 120%;
        margin-left: -36px;
        /*margin-top: 80px;*/
    }
    .foot{
        display: flex;
        justify-content: space-around;

    }
    h4{
        text-align: center;
    }

</style>

Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <ul>
            <!--定义一个插槽（挖个坑，等着组件的使用者进行填充）-->
            <slot name="center">我是一个默认值，当使用者没有传递具体结构时，我会出现</slot>
            <slot name="footer">我是一个默认值，当使用者没有传递具体结构时，我会出现</slot>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props:['title'],
        data(){
            return{

            }
        }
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h3{
        text-align: center;
        background-color: orange;
    }
</style>

效果
在这里插入图片描述
3、作用域插槽

Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
            <!--定义一个插槽（挖个坑，等着组件的使用者进行填充）-->
            <slot :games="games">我是一个默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>
<script>
    export default {
        name: "Category",
        props:['title'],
        data(){
            return{
                games:['红色警戒','穿越火线','劲舞团','超近玛丽'],
            }
        }
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h3{
        text-align: center;
        background-color: orange;
    }
</style>

第一种写法

<category title="游戏"  >
            <template scope="{games}">
                <ul>
                    <li v-for="(p,index) in games" :key="index">{{p}}</li>
                </ul>
            </template>
        </category>

第二种写法

 <category title="游戏"  >
            <template slot-scope="{games}">
                <ol>
                    <li v-for="(p,index) in games" :key="index">{{p}}</li>
                </ol>
            </template>
        </category>

第三种写法

<category title="游戏"  >
            <template scope="ati">
                <h4 v-for="(p,index) in ati.games" :key="index">{{p}}</h4>
            </template>
        </category>

效果
在这里插入图片描述
总结

1、作用：让父组件可以向子组件制定位置插入html结构，也是一种组件的通信方式，适用于父组件====>子组件
2、分类：默认插槽、具名插槽、作用域插槽

3、使用方式

	1、默认插槽

父组件中：
<Category>
	<div>html</div/>
</Category>

子组件中：
<template>
	<div>
		<slot>
			插槽默认内容
		</slot>
	</div/>
</template>

	2、具名插槽

父组件中：

<Category>
	<template slot="footer">
		<div>html结构1</div/>
	</template>
	
	<template slot="center">
		<div>html结构2</div/>
	</template>

</Category>

子组件中：
<template>
	<div>
		<slot name="center">插槽默认内容</slot>
		<slot name="footer">插槽默认内容</slot>
	</div/>
</template>

	3、作用域插槽
			
		1、理解：数组在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但是使用数据所遍历出来的结构由App组件决定）

		2、具体编码：

父组件中：
<Category>
	<template  scope="scopeData">
		<ul>
			<li v-for="(p,index) in scopeData.games" :key="index">{{p}}</li>
		</ul>
	</template>
</Category>

<Category>
	<template  slot-scope="scopeData">
		<ul>
			<h4 v-for="(p,index) in scopeData.games" :key="index">{{p}}</h4>
		</ul>
	</template>
</Category>


子组件：

<template>
	<div>
		<slot :games="games">插槽默认内容</slot>
	</div/>
</template>
<script>
    export default {
        name: "Category",
        props:['title'],
        data(){
            return{
                games:['红色警戒','穿越火线','劲舞团','超近玛丽'],
            }
        }
    }
</script>

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

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

相关文章

网络安全之SSL证书加密

网络安全之SSL证书加密

简介 SSL证书是一种数字证书&#xff0c;遵守SSL协议&#xff0c;由受信任的数字证书颁发机构&#xff08;CA&#xff09;验证服务器身份后颁发。它具有服务器身份验证和数据传输加密的功能&#xff0c;能够确保数据在传输过程中的安全性和完整性。 具体来说&#xff0c;SSL证…
阅读更多...
番外篇 vue与django 交互流程

番外篇 vue与django 交互流程

学习了一段时间的django和vue&#xff0c;对于前后端开发有了一个初步的了解&#xff0c;这里记录一下编写的流程和思路&#xff0c;主要是为了后面如果遗忘从哪里开始操作做一个起步引导作用 一、Django后端 参考下前面django的文档https://moziang.blog.csdn.net/article/det…
阅读更多...
Web实战丨基于django+hitcount的网页计数器

Web实战丨基于django+hitcount的网页计数器

文章目录 写在前面Django简介主要程序运行结果系列文章写在后面 写在前面 本期内容 基于djangohitcount的网页计数器 所需环境 pythonpycharm或vscodedjango 下载地址 https://download.csdn.net/download/m0_68111267/88795611 Django简介 Django 是一个开源的、基于 …
阅读更多...
六、Nacos源码系列：Nacos健康检查

六、Nacos源码系列：Nacos健康检查

目录 一、简介 二、健康检查流程 2.1、健康检查 2.2、客户端释放连接事件 2.3、客户端断开连接事件 2.4、小结 2.5、总结图 三、服务剔除 一、简介 Nacos作为注册中心不止提供了服务注册和服务发现的功能&#xff0c;还提供了服务可用性检测的功能&#xff0c;在Nacos…
阅读更多...
【QT+QGIS跨平台编译】之二十二：【FontConfig+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

【QT+QGIS跨平台编译】之二十二：【FontConfig+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

文章目录 一、FontConfig介绍二、文件下载三、文件分析四、pro文件五、编译实践 一、FontConfig介绍 FontConfig 是一个用于配置和定制字体的库&#xff0c;广泛应用于基于X Window系统的操作系统中&#xff0c;尤其是在Linux和Unix-like系统中。它为应用程序提供了一种统一的…
阅读更多...
在VM虚拟机搭建NFS服务器

在VM虚拟机搭建NFS服务器

NFS共享要求如下&#xff1a; &#xff08;1&#xff09;共享“/mnt/自已姓名的完整汉语拼音”目录&#xff0c;允许XXX网段的计算机访问该共享目录&#xff0c;可进行读写操作。&#xff08;说明&#xff1a;XXX网段&#xff0c;请根据你的规划&#xff0c;再具体指定&#xf…
阅读更多...
2024美赛数学建模B题思路分析 - 搜索潜水器

2024美赛数学建模B题思路分析 - 搜索潜水器

# 1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…
阅读更多...
STM32F1 - 存储器映射

STM32F1 - 存储器映射

Memory mapping 1> 外设内存地址映射2> GPIO寄存器映射3> 存储器访问 1> 外设内存地址映射 1> STM32F103ZET6的地址线位宽为32位&#xff0c;所以寻址空间为4GB &#xff08;2 ^ 32 4GB&#xff09;&#xff1b; 2> STM32将&#xff0c;Flash&#xff0c;SR…
阅读更多...
数仓建模维度建模理论知识

数仓建模维度建模理论知识

0. 思维导图 第 1 章 数据仓库概述 1.1 数据仓库概述 数据仓库是一个为数据分析而设计的企业级数据管理系统。数据仓库可集中、整合多个信息源的大量数据&#xff0c;借助数据仓库的分析能力&#xff0c;企业可从数据中获得宝贵的信息进而改进决策。同时&#xff0c;随着时间的…
阅读更多...
【经典项目】Java小游戏 —— 弹力球

【经典项目】Java小游戏 —— 弹力球

一、功能需求 设计一个Java弹球小游戏的思路如下&#xff1a; 创建游戏窗口&#xff1a;使用Java图形库&#xff08;如Swing或JavaFX&#xff09;创建一个窗口&#xff0c;作为游戏的可视化界面。 绘制游戏界面&#xff1a;在游戏窗口中绘制游戏所需的各个元素&#xff0c;包括…
阅读更多...
同城外卖跑腿app开发：重新定义城市生活

同城外卖跑腿app开发：重新定义城市生活

随着科技的发展和人们生活节奏的加快&#xff0c;同城外卖跑腿app应运而生&#xff0c;成为现代城市生活中的重要组成部分。本文将探讨同城外卖跑腿app开发的意义、市场需求、功能特点以及未来的发展趋势。 一、同城外卖跑腿app开发的意义 同城外卖跑腿app作为一种便捷的生活…
阅读更多...
Visual Studio 2022 查看类关系图

Visual Studio 2022 查看类关系图

这里写自定义目录标题 右键要查看的项目 -“查看”-“查看类图”效果展示&#xff1a; 原文地址 www.cnblogs.com 步骤1&#xff1a;勾选扩展开发 步骤2: 勾选类设计器 右键要查看的项目 -“查看”-“查看类图” 效果展示&#xff1a;
阅读更多...
使用 WebSocket 发送二进制数据：最佳实践

使用 WebSocket 发送二进制数据：最佳实践

WebSocket 技术提供了一种在客户端和服务器间建立持久连接的方法&#xff0c;使得双方可以在打开连接后随时发送数据&#xff0c;而不必担心建立复杂的持久连接机制。同时&#xff0c;使用二进制数据&#xff0c;如ArrayBuffer&#xff0c;可以更有效率地传送图像、声音等信息。…
阅读更多...
MySQL知识点总结（四）——MVCC

MySQL知识点总结（四）——MVCC

MySQL知识点总结&#xff08;四&#xff09;——MVCC 三个隐式字段row_idtrx_idroll_pointer undo logread viewMVCC与隔离级别的关系快照读和当前读 MVCC全称是Multi Version Concurrency Control&#xff0c;也就是多版本并发控制。它的作用是提高事务的并发度&#xff0c;通…
阅读更多...
西瓜书学习笔记——主成分分析（公式推导+举例应用）

西瓜书学习笔记——主成分分析（公式推导+举例应用）

文章目录 算法介绍实验分析 算法介绍 主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;是一种常用的降维技术&#xff0c;用于在高维数据中发现最重要的特征或主成分。PCA的目标是通过线性变换将原始数据转换成一组新的特征&#xff0c;这些新…
阅读更多...
web前端--------渐变和过渡

web前端--------渐变和过渡

线性渐变&#xff0c;是指颜色沿一条直线进行渐变&#xff0c;例如从上到下、从左到右。 当然&#xff0c;CSS中也支持使用角度来设置渐变的方向&#xff0c;角度单位为deg。 0deg&#xff0c;为12点钟方向&#xff0c;表示从下到上渐变。 90deg&#xff0c;为3点钟方向&…
阅读更多...
C++ | 部分和函数partial_sum的使用技巧

C++ | 部分和函数partial_sum的使用技巧

如果你需要处理一个数组的前缀和&#xff0c;或者数组中某一段元素的前缀和&#xff0c;你会怎么做呢&#xff1f; partial_sum函数是STL中的函数&#xff0c;用于计算范围的部分和&#xff0c;并从结果开始分配范围中的每个元素&#xff0c;range[first,last)中相应元素的部分…
阅读更多...
nest.js实现登录验证码功能(学习笔记)

nest.js实现登录验证码功能(学习笔记)

安装express-session npm i express-session 引入 注册session import * as session from express-session;import { NestFactory } from nestjs/core; import {DocumentBuilder,SwaggerModule, } from nestjs/swagger;import { AppModule } from ./app.module;async functio…
阅读更多...
（五）springboot 配置多数据源连接mysql和hive

（五）springboot 配置多数据源连接mysql和hive

项目结构如下 mysql 执行如下建表语句&#xff0c;并插入一条测试数据 1 2 3 4 5 CREATE TABLE user ( id int(11) NOT NULL, name varchar(255) COLLATE utf8mb4_general_ci DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_ge…
阅读更多...
计算机服务器中了DevicData勒索病毒如何解密，DevicData勒索病毒解密流程

计算机服务器中了DevicData勒索病毒如何解密，DevicData勒索病毒解密流程

网络数据安全一直是企业关心的主要话题&#xff0c;近期&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服务器遭到了DevicData勒索病毒攻击&#xff0c;导致企业计算机服务器瘫痪无法正常工作&#xff0c;严重影响了工作业务开展。经过云天数据恢复中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023