vue v-slot指令

目录

  • 定义
  • 语法
  • 使用场景
  • 场景一
  • 场景二
  • 场景三
  • tips
    • 只有一个默认插槽时

定义

在Vue中, v-slot 指令用于定义插槽的模板内容。它用于在父组件中传递内容到子组件中的插槽。 v-slot 指令可以用于 标签或组件标签上,以便在子组件中使用插槽。

语法

使用 v-slot 指令时,可以使用以下两种语法:

  1. 缩写语法: # 符号表示 v-slot 指令,后面跟插槽名称。
<template #插槽名称><!-- 插槽内容 -->
</template>
  1. 完整语法: v-slot 指令后面跟着 : ,后面是插槽名称。
<template v-slot:插槽名称><!-- 插槽内容 -->
</template>

使用场景

v-slot 指令的使用场景包括但不限于以下几种:

  • 在组件中使用插槽,将父组件中的内容传递给子组件。
  • 在子组件中使用具名插槽,根据插槽名称渲染不同的内容。
  • 在子组件中使用作用域插槽,将子组件中的数据传递到父组件中进行渲染。

场景一

在组件中使用插槽,将父组件中的内容传递给子组件。

父组件

<template><div><child-component><template v-slot:default><!-- 插槽内容 --><p>This is the content passed from the parent component.</p></template></child-component></div>
</template>

子组件

<template><div><slot></slot></div>
</template>

场景二

在子组件中使用具名插槽,根据插槽名称渲染不同的内容:

父组件

<template><div><child-component><template v-slot:header><!-- 插槽内容 --><h1>Header Content</h1></template><template v-slot:body><!-- 插槽内容 --><p>Body Content</p></template></child-component></div>
</template>

子组件

<template><div><slot name="header"></slot><slot name="body"></slot></div>
</template>

场景三

在子组件中使用作用域插槽,将子组件中的数据传递到父组件中进行渲染:

父组件

<template><div><child-component><template v-slot:default="slotProps"><!-- 插槽内容 --><p>{{ slotProps.message }}</p></template></child-component></div>
</template>

子组件

<template><div><slot :message="message"></slot></div>
</template><script>
export default {data() {return {message: "Hello from child component!"};}
};
</script>

在router-view中的应用,拿到router-view中的Component值,同时利用component 标签动态渲染组件

 <router-view v-slot="{ Component, route }"><transition appear name="fade-transform" mode="out-in"><keep-alive :include="keepAliveName"><component :is="Component" v-if="isRouterShow" :key="route.fullPath" /></keep-alive></transition></router-view>

tips

如果父组件没有向插槽传入值,则子组件会显示原来的内容,当传入具体的值时,则会覆盖掉插槽内的内容

子组件:

<template><slot name="a1" :content="slot_data"> <h1>child-123</h1> </slot>
</template><script lang="ts" setup>
const slot_data = "child-content";
</script><style scoped></style>

父组件:

<template><div><h5>slot-test</h5><child><!-- <template #a1="{ content }"><div>{{ content }}</div></template> --></child></div>
</template><script lang="ts" setup>
import child from "./child.vue";
</script><style scoped></style>

此时注释掉插值代码,结果如图,只会显示原来槽内内容
在这里插入图片描述

父组件代码修改如下

<template><div><h5>slot-test</h5><child><template #a1="{ content }"><div>{{ content }} 我是父组件</div></template></child></div>
</template><script lang="ts" setup>
import child from "./child.vue";
</script><style scoped></style>

显示内容如图所示,则会覆盖掉原来槽值
在这里插入图片描述

在v-slot中,既可以由子组件向父组件传值(slot_data),又可以由父组件向子组件传递html内容,可以看做是‘’双向的‘’
在一些场景比如子组件渲染的内容既需要子组件数据又需要父组件数据时可以考虑使用插槽来完成

props同样也可以向子组件传值,在子组件中同一渲染完成,这是之前一直使用的方式,之后可以考虑使用插槽,拿到子组件中的值,又可以向子组件传递内容

只有一个默认插槽时

可以直接这样写,类似于上述router-view的用法
子组件:

<template><slot :content="slot_data" :content2="slot_data2"> </slot>
</template><script lang="ts" setup>
const slot_data = "child-content";
const slot_data2 = "child-content2";
</script>

父组件:
content,content2采用解构赋值直接从slotProps值(默认传递变量的名称)中得到,templete也可以省略,child标签内的所有值都会被传入插槽

<template><div><h5>slot-test</h5><child v-slot="{ content, content2 }"><!-- <h1>{{ content }}</h1> -->{{ content }}{{ content2 }}784561</child></div>
</template><script lang="ts" setup>
import child from "./child.vue";
</script>

结果如图:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

16-1_Qt 5.9 C++开发指南_多语言界面

文章目录 1. 多语言界面设计概述2. tr()函数的使用3. 生成语言翻译文件4. 使用Qt Linguist 翻译 ts 文件5. 调用翻译文件改变界面语言5.1 生成qm文件5.2 项目启动时设置界面语言5.3 动态切换语言 1. 多语言界面设计概述 有些软件需要开发多语言界面版本&#xff0c;如中文版和…

自动化测试框架?数据驱动vs关键字驱动,该怎么做?

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 对于自动化测试框…

BI报表工具有哪些作用?奥威BI全面剖析数据

BI报表工具有哪些作用&#xff1f;主要的作用是通过整合多业务来源数据&#xff0c;全面分析挖掘数据&#xff0c;来帮助企业实现数据化运营、支持智能决策、实现数据资产沉淀和增值、进行数据挖掘和预测分析、提高数据可读性和数据可视化程度等&#xff0c;从而提高企业的竞争…

【C++学习】STL容器——list

目录 一、list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modifiers 1.2.6 list 迭代器失效 二、list的模拟实现 2.1 模拟实现list 三、list和vector的对比…

Java版知识付费平台免费搭建 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台qt

&#xfeff;Java版知识付费源码 Spring CloudSpring BootMybatisuniapp前后端分离实现知识付费平台 提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售…

CNN成长路:从AlexNet到EfficientNet(01)

一、说明 在 10年的深度学习中&#xff0c;进步是多么迅速&#xff01;早在 2012 年&#xff0c;Alexnet 在 ImageNet 上的准确率就达到了 63.3% 的 Top-1。现在&#xff0c;我们超过90%的EfficientNet架构和师生训练&#xff08;teacher-student&#xff09;。 如果我们在 Ima…

【Kubernetes部署篇】基于Ubuntu20.04操作系统搭建K8S1.23版本集群

文章目录 一、集群架构规划信息二、系统初始化准备(所有节点同步操作)三、安装kubeadm(所有节点同步操作)四、初始化K8S集群(master节点操作)五、添加Node节点到K8S集群中六、安装Calico网络插件七、测试CoreDNS可用性 一、集群架构规划信息 pod网段&#xff1a;10.244.0.0/16…

HTTP——九、基于HTTP的功能追加协议

HTTP 一、基于HTTP的协议二、消除HTTP瓶颈的SPDY1、HTTP的瓶颈Ajax 的解决方法Comet 的解决方法SPDY的目标 2、SPDY的设计与功能3、SPDY消除 Web 瓶颈了吗 三、使用浏览器进行全双工通信的WebSocket1、WebSocket 的设计与功能2、WebSocket协议 四、期盼已久的 HTTP/2.01、HTTP/…

卡尔曼滤波 | Matlab实现无迹kalman滤波仿真

文章目录 效果一览文章概述研究内容程序设计参考资料效果一览 文章概述 卡尔曼滤波 | Matlab实现无迹kalman滤波仿真 研究内容 无迹kalman滤波(UKF)不是采用的将非线性函数线性化的做法。无迹kalman仍然采用的是线性kalman滤波的架构,对于一步预测方程,使用无迹变换(UT)来…

visio,word添加缺少字体,仿宋_GB2312、楷体_GB2312、方正小标宋简体等字体下载

一. 内容简介 visio,word添加缺少字体,仿宋_GB2312、楷体_GB2312、方正小标宋简体等字体下载 二. 软件环境 2.1 visio 三.主要流程 3.1 下载字体 http://www.downza.cn/ 微软官方给的链接好多字体没有&#xff0c;其他好多字体网站&#xff0c;就是给你看个样式&#xff…

vue3中CompositionApi理解与使用

CompositionApi&#xff0c;组合式API&#xff0c;相当于react中hooks&#xff0c;函数式。 优势&#xff1a;1&#xff0c;增加了代码的复用性&#xff08;类似mixin&#xff0c;slot&#xff0c;高阶组件功能&#xff09; 2&#xff0c;代码可读性更好。可以将处理逻辑和视图…

Elasticsearch:语义搜索 - Semantic Search in python

当 OpenAI 于 2022 年 11 月发布 ChatGPT 时&#xff0c;引发了人们对人工智能和机器学习的新一波兴趣。 尽管必要的技术创新已经出现了近十年&#xff0c;而且基本原理的历史甚至更早&#xff0c;但这种巨大的转变引发了各种发展的“寒武纪大爆炸”&#xff0c;特别是在大型语…

数字孪生的「三张皮」问题:数据隐私、安全与伦理挑战

引言 随着数字化时代的来临&#xff0c;数据成为了当今社会的宝贵资源。然而&#xff0c;数据的广泛使用也带来了一系列隐私、安全与伦理挑战。数字孪生作为一种虚拟的数字化实体&#xff0c;通过收集和分析大量数据&#xff0c;模拟和预测现实世界中的各种情境&#xff0c;为…

【云原生|Docker系列第3篇】Docker镜像的入门实践

欢迎来到Docker入门系列的第三篇博客&#xff01;在前两篇博客中&#xff0c;我们已经了解了什么是Docker以及如何安装和配置它。本篇博客将重点介绍Docker镜像的概念&#xff0c;以及它们之间的关系。我们还将学习如何拉取、创建、管理和分享Docker镜像&#xff0c;这是使用Do…

循环结构进阶

二重循环 import java.util.Scanner;public class Demo01 {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 二重循环 外循环班级 内循环学生for (int i1; i<3; i) { // 外循环班级System.out.println("请输入第" i "…

Leetcode-每日一题【剑指 Offer 17. 打印从1到最大的n位数】

题目 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。 答案需要取模 1e97&#xff08;1000000007&#xff09;&#xff0c;如计算初始结果为&#xff1a;1000000008&#xff0c;请返回 1。 示例 1&#xff1a; 输…

机器学习、人工智能、深度学习三者的区别

目录 1、三者的关系 2、能做些什么 3、阶段性目标 1、三者的关系 机器学习、人工智能&#xff08;AI&#xff09;和深度学习之间有密切的关系&#xff0c;它们可以被看作是一种从不同层面理解和实现智能的方法。 人工智能&#xff08;AI&#xff09;&#xff1a;人工智能是一…

什么是serialVersionUID?

serialVersionUID是干啥的&#xff1f; Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的。 在进行反序列化时&#xff0c;JVM会把传来的字节流中的serialVersionUID与本地相应实体&#xff08;类&#xff09;的serialVersionUID进行比较&#xff0…

结构体和 Json 相互转换(序列化反序列化)

关于 JSON 数据 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也 易于机器解析和生成。RESTfull Api 接口中返回的数据都是 json 数据。 Json 的基本格式如下&#xff1a; { "a": "Hello", "b": "…

如何申请中国境内提供金融信息服务业务许可

依据《外国机构在中国境内提供金融信息服务管理规定》《外国机构在中国境内提供金融信息服务申请许可说明》等政策&#xff0c;外国机构在中国境内提供金融信息服务业务许可要求如下&#xff1a; 金融信息服务定义 所称的外国机构&#xff0c;是指外国金融信息服务提供者。 …