Vue学习计划-Vue3--核心语法(九)slot插槽

slot
  • 插槽:简单说就是父组件内部使用了子组件,但是子组件内部某些结构需要使用者自行定义,此时就需要用到插槽实现

    1. 默认插槽

    默认插槽的namedefault

    • 父组件
      <template><div><Child><h3>默认插槽</h3></Child></div></template>
    
    • 子组件
    <template><div><!-- 默认插槽 --><!-- <slot name="default"></slot> --><slot></slot></div>
    </template>
    
    1. 具名插槽
    1. 在插槽上加上name,可以实现多个结构匹配
    2. v-slot必须要加在组件标签或者template标签上
    • 父组件
      <template><div><Child><!-- 可以简写成 <template #c1> --><template v-slot: c1><h3>插槽c1</h3></template><template v-slot: c2><h3>插槽c1</h3></template></Child></div></template>
    
    • 子组件
    <template><div><!-- 具名插槽 --><slot name="c1"></slot><slot name="c2"></slot></div>
    </template>
    
    1. 作用域插槽

    理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(新闻数据在News组件中,但使用数据所遍历出来的结构由App组件决定)

    具体编码:

    • 父组件:
      <template><div class="father"><h3>父组件</h3><div class="content"><!-- <Hobbies v-slot="params"> --><Hobbies #default="params"><ul><li v-for="y in params.hobbies" :key="y.id">{{ y.name }}</li></ul></Hobbies><Hobbies><!-- 加在标签上会报错, Game组件上是允许的 --><!-- <h3 #footer>sasdas</h3> --><Game #footer></Game></Hobbies></div></div></template><script setup lang="ts" name="Father">import Game from './Game.vue';import Hobbies from './Hobbies.vue'</script>
    
    • 子组件:<Hobbies>
    <template><div class="game"><h2>爱好</h2><slot :youxi="hobbies" haha="哈哈" hehe="呵呵"></slot></div>
    </template><script setup lang="ts" name="Game">import {reactive} from 'vue'let hobbies = reactive([{id:'01',name:'读书'},{id:'02',name:'唱歌'},{id:'03',name:'跳舞'},])
    </script>
    

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

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

相关文章

MAVROS的进一步理解

一、Mavros简介 顾名思义&#xff0c; mavros就是mavlinkros。mavros是PX4官方提供的一个运行于ros下收发mavlink消息的工具&#xff0c;利用mavros可以发送mavlink消息给飞控(可以控制飞机)&#xff0c;并且可以从飞控中接受数据(例如&#xff1a;飞控的位置速度 IMU数据等等…

阿里云服务器ECS介绍_高性能云服务器_为了无法计算的价值

阿里云高性能云服务器60%单实例最大性能提升&#xff0c;35Gbps内网带宽&#xff0c;网络增强&通用型云服务器、本地SSD型云服务器、大数据型云服务器、GPU异构型云服务器&#xff0c;阿里云百科aliyunbaike.com分享阿里云高性能云服务器&#xff1a; 阿里云高性能云服务器…

大模型实战营Day4 作业

基础作业&#xff1a; 构建数据集&#xff0c;使用 XTuner 微调 InternLM-Chat-7B 模型, 让模型学习到它是你的智能小助手&#xff0c;效果如下图所示&#xff0c;本作业训练出来的模型的输出需要将不要葱姜蒜大佬替换成自己名字或昵称&#xff01; 微调前&#xff08;回答比较…

LMDeploy 的量化和部署

LMDeploy 的量化和部署 文档&#xff1a;https://github.com/InternLM/tutorial/blob/vansin-patch-4/lmdeploy/lmdeploy.md 视频&#xff1a;https://www.bilibili.com/video/BV1iW4y1A77P 一、模型量化 大模型参数量很大&#xff0c;运行起来非常消耗显存和内存&#xff0c;…

Python 基于Open3D的点云均匀下采样算法

目录 一、算法概述二、代码示例三、测试示例一、算法概述 点云均匀下采样算法:是在保持点云关键特征的前提下,减少点云数据的数量。 算法流程: 首先使用o3d.io.read_point_cloud函数读取点云数据。然后,使用uniform_down_sample函数进行均匀下采样,将点云数据按照指定的采…

MySQL修炼手册8:约束与完整性:保证数据的一致性

目录 写在开头1 主键与唯一键约束1.1 PRIMARY KEY约束的作用1.2 主键的复合使用1.3 主键的修改与删除1.4 UNIQUE约束的应用场景1.5 主键与唯一键约束的性能影响1.6 主键的自动增长1.7 主键的最佳实践1.8 独特性与业务需求1.9 避免过度使用唯一约束1.10 主键与唯一键的关系 2 外…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux网络编程第三天-UDP编程练习题(物联技术666)

网盘链接:https://pan.baidu.com/s/1TKdHdeuDI8XPaakepvSLZQ?pwd=1688 提取码:1688 利用UDP实现双人不同机器聊天(服务器可以被多人连接,显示多人聊天记录) //-------------------------服务器 #include <string.h> #include <sys/types.h> #include <…

VCG 网格布尔运算

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 Mesh布尔操作是一种在三维计算机图形学中用于组合两个或多个网格(mesh)对象的方法。它可以将两个网格对象组合成一个新的对象,同时保留原始对象的拓扑结构和几何信息。Mesh布尔操作主要有以下三种类型: Union(…

爱这个世界,从爱自己开始

亲爱的月月&#xff1a; 早上十点叫你起床&#xff0c;你仍睡意朦胧&#xff0c;今天的网课看样又得加班加点到凌晨。昨晚你大半夜跑完步后&#xff0c;涮火锅、麻辣肚、吃冷饮后闹肚子不停&#xff0c;你妈心疼地照顾你时&#xff0c;你勇敢地微笑着对我们说“肉体不就是拿来…

android gradle编译问题记录

1、gradle下载太慢 有时候即便配置了国内镜像下载gradle也是慢的一批&#xff0c;可以手动下载gradle文件配置到项目中,比如我下载了一个新项目&#xff0c;它的gradle版本是gradle-4.1-all&#xff0c;进入项目时它会开始下载gradle&#xff0c;此时gradle目录中会创建gradle…

[NSSCTF Round#16 Basic] CPR

打着玩玩&#xff0c;比赛很简单。 Crypto pr 一个RSA题&#xff0c;n1p*q,n2q*r给了两个c和p,r而且flag经过pad用单因子无法解出。分别用p,r解完再取crt from Crypto.Util.number import * import randomflagplaintext NSSCTF{****************} charset abcdefghijklmn…

【DP】931. 下降路径最小和

题目 法1&#xff1a;标准DP class Solution {public int minFallingPathSum(int[][] matrix) {if (matrix.length 0 || matrix[0].length 0) {return 0;}int m matrix.length, n matrix[0].length;int[][] dp new int[m][n]; // 到达i,j的最小路径和int min Integer.M…

【Spring之ComponentScanAnnotationParser】

ComponentScanAnnotationParser 1. ComponentScanAnnotationParser属性解析2. 一个重要方法---parse 1. ComponentScanAnnotationParser属性解析 private final Environment environment;// 用于获取当前应用运行时的配置信息&#xff0c;包括但不限于系统属性、环境变量以及通…

MySQL基础学习: 使用EXPLAIN查看执行计划详解分析

一、EXPLAIN语句的作用 在客户端执行MySQL的操作语句&#xff0c;会依次经过MySQL客户端连接管理、语法解析与优化&#xff08;查询缓存、语法解析、查询优化&#xff09;、存储引擎层。其中查询优化器在基于成本和规则对查询语句进行优化&#xff0c;并且在优化后会生成一个执…

Redis学习指南(6)-Redis的数据类型简介

文章目录 引言1. 字符串 (String)2. 哈希 (Hash)3. 列表 (List)4. 集合 (Set)5. 有序集合 (ZSet)结语 引言 Redis是一种高性能的键值存储系统&#xff0c;被广泛应用于缓存、消息队列等场景。其中&#xff0c;Redis的数据类型是其强大功能的基础之一。本文将深入介绍Redis的主…

nacos配置中心只能获取部分配置的问题

检查配置中心&#xff0c;在配置中心里是可以看到监听的服务地址的&#xff0c;但是却获取不到配置 nacos配置中心主要是在这个NacosConfigService的这个类下面。该接口下面主要有一些获取配置&#xff0c;发布配置&#xff0c;增加监听器&#xff0c;删除配置&#xff0c;删…

一个简易的PHP论坛系统

一个简易的PHP论坛系统 php课程设计&#xff0c;毕业设计 预览 技术 bootstrap 4.x jquery css php mysql 5.7 目录结构 登录 管理员 admin/123456 测试用户 user1/123456 更多文章和源码获取查看

Windows平台RTMP推送|轻量级RTSP服务录像模块如何支持中文路径?

技术背景 我们在做Windows平台RTMP推送、轻量级RTSP服务录像模块的时候&#xff0c;部分开发者抱怨路径无法设置中文&#xff0c;只能设置为英文。 以C#的接口为例&#xff0c;早期的设计如下&#xff1a; /** 设置本地录像目录, 必须是英文目录&#xff0c;否则会失败*/[DllI…

Debezium发布历史66

原文地址&#xff1a; https://debezium.io/blog/2019/07/25/debezium-0-10-0-beta3-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 0.10.0.Beta3 发布 七月 25, 2019 作者&#xff1a; Jir…