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.mzph.cn/news/21430.shtml

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

相关文章

一位年薪50W的测试被开除,回怼的一番话,令人沉思

一位年薪35W测试工程师被开除回怼道&#xff1a;“反正我有技术&#xff0c;在哪不一样” 一技傍身&#xff0c;万事不愁&#xff0c;当我们掌握了一技之长后&#xff0c;在职场上说话就硬气了许多&#xff0c;不用担心被炒&#xff0c;反过来还可以炒了老板&#xff0c;这一点…

MVC配置原理

如果你想保存springboot的mvc配置并且还想自己添加自己的配置就用这个。 视图解析器原理&#xff0c;它会从IOC容器里获取配置好视图解析器的配置类里的视图解析器集合&#xff0c; 然后遍历集合&#xff0c;生成一个一个的视图对象&#xff0c;放入候选 视图里&#xff0c;…

MQTT协议详解「概念、特性、版本及作用」

MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输&#xff09;是ISO标准下基于发布/订阅方式的轻量级消息协议。MQTT通常使用TCP / IP&#xff08;传输控制协议/Internet协议&#xff09;作为其传输&#xff0c;但也可以使用其他双向传输。MQ…

海外版金融理财系统源码 国际投资理财系统源码 项目投资理财源码

海外版金融理财系统源码 国际投资理财系统源码 项目投资理财源码

8.3一日总结

1.远程仓库的使用 a.克隆远程仓库 1>.在桌面克隆远程仓库 git clone 仓库名 2>.修改仓库内容 3>添加目录 git add. 4>提交: git commit -m 完成登录功能 5>推送提交远程仓库 : git push origin master -u 6>更改推送:git push(简写形式) 需要先添加,再提交,最…

一文学透设计模式——工厂模式

工厂模式 概念 牛马人生公司最近开启了线上直播&#xff0c;直播中牛马人生公司宣称他们建造了一家世界上最为先进的工厂&#xff0c;任何人只要去到工厂面前&#xff0c;告诉工厂你要什么牌子的汽车&#xff0c;工厂就会给你一辆什么牌子的汽车。 这引起了粉丝朋友的注意&a…

stm32与上位机电脑间最快的通信方式是什么?

对于小型多关节机械臂的控制电路设计&#xff0c;选择合适的通信方式可以提高MCU与上位机之间的实时性。以下是一些在STM32上常用的通信方式&#xff0c;你可以根据你的具体需求选择适合的&#xff1a; 串口通信&#xff08;UART&#xff09;&#xff1a;串口通信是一种常见的…

opencv-34 图像平滑处理-2D 卷积 cv2.filter2D()

2D卷积是一种图像处理和计算机视觉中常用的操作&#xff0c;用于在图像上应用滤波器或卷积核&#xff0c;从而对图像进行特征提取、平滑处理或边缘检测等操作。 在2D卷积中&#xff0c;图像和卷积核都是二维的矩阵或数组。卷积操作将卷积核在图像上滑动&#xff0c;对每个局部区…

Netty学习(四)

文章目录 四. 优化与源码1. 优化1.1 扩展序列化算法jdk序列化与反序列化Serializer & AlgorithmConfigapplication.properties MessageCodecSharableMessage&#xff08;抽象类&#xff09; 测试序列化测试反序列化测试 1.2 参数调优1&#xff09;CONNECT_TIMEOUT_MILLIS2&…

ansible配置文件案例

案例一 控制主机上的普通用户控制受控主机 控制端1台&#xff0c;受控端两台 1.将两台受控主机添加到/etc/hosts文件中 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhos…

Qt5.13引入QtWebApp的模块后报错: error C2440: “reinterpret_cast”: 无法从“int”转换为“quintptr”

1、开发环境 Win10-64 qt5.13 msvc2015-64bit-release 2、报错 新建一个demo工程。 引入QtWebApp的httpserver、logging、templateengine三个模块后。 直接运行&#xff0c;&#xff0c;此时报错如下&#xff1a; E:\Qt5.13.1\install\5.13.1\msvc2015_64\include\QtCore…

Java 8 中使用 Stream 遍历树形结构

在实际开发中&#xff0c;我们经常会开发菜单&#xff0c;树形结构&#xff0c;数据库一般就使用父id来表示&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用Java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理&#xff0c;我们一起来看看&#x…

GEE:矢量数据去除重复值(输出样本点数据的标签信息)

作者:CSDN @ _养乐多_ 本文记录了在GoogleEarthEngine(GEE)平台上,将样本点数据中某个字段的值去除重复值,并将剩下的值打印到控制台的代码。该代码可以用于快速在GEE平台上查询土地利用分类信息中landcover的类别信息。 矢量数据信息如下所示, 打印结果如下所示, 文章…

Flask-SocketIO

一、简介&#xff1a; Flask-SocketIO使Flask应用程序可以实现客户端和服务器之间的低延迟双向通信。客户端应用程序可以使用 Javascript、Python、C、Java和Swift中的任何SocketIO客户端库或任何其他兼容客户端来建立与服务器的永久连接。 二、安装&#xff1a; pip instal…

【TypeScript】类型断言的基本使用

类型断言的概念 有些时候开发者比TS本身更清楚当前的类型是什么&#xff0c;可以使用断言&#xff08;as&#xff09;让类型更加精确和具体。 类型断言&#xff08;Type Assertion&#xff09;表示可以用来手动指定一个值的类型。 类型断言语法&#xff1a; 值 as 类型 或 <…

4.2的幂次方表示

【题目】 任何一个正整数都可以用2进制表示&#xff0c;例如&#xff1a;137的2进制表示为10001001。 将这种2进制表示写成2的次幂的和的形式&#xff0c;令次幂高的排在前面&#xff0c;可得到如下表达式&#xff1a;137 2^7 2^3 2^0 现在约定幂次用括号来表示&#xff0…

Kafka3.0.0版本——生产者如何提高吞吐量

目录 一、生产者提高吞吐量参数设置二、产者提高吞吐量代码示例 一、生产者提高吞吐量参数设置 batch.size&#xff1a;设置批次大小&#xff0c;默认16klinger.ms&#xff1a;设置等待时间&#xff0c;修改为5-100msbuffer.memory&#xff1a;设置缓冲区大小&#xff0c; 默认…

Node.js-http模块服务端请求与响应操作,请求报文与响应报文

简单案例创建HTTP服务端&#xff1a; // 导入 http 模块 const http require("http"); // 创建服务对象 const server http.createServer((request, response) > {// 设置编码格式&#xff0c;解决中文乱码问题response.setHeader("content-type", &…

升级mybatis-plus到3.5.3.1和JSQLParser 从4.3升级到4.6版本引起的插入问题解决

由于项目组件升级&#xff0c;所以需要升级mybatis-plus到3.5.3.1和JSQLParser 从4.3升级到4.6版本&#xff0c;但发现用标准的插入也会报错&#xff0c;如下&#xff1a; ### Cause: com.baomidou.mybatisplus.core.exceptions.MybatisPlusException: Failed to process, Erro…

tomcat限制IP访问

tomcat可以通过增加配置&#xff0c;来对来源ip进行限制&#xff0c;即只允许某些ip访问或禁止某些来源ip访问。 配置路径&#xff1a;server.xml 文件下 标签下。与同级 <Valve className"org.apache.catalina.valves.RemoteAddrValve" allow"192.168.x.x&…