首页 > 其他分享 >【vue2】14.插槽

【vue2】14.插槽

时间:2024-11-13 16:15:40浏览次数:3  
标签:slot 14 作用域 插槽 内容 vue2 标签 组件

目录

插槽 - 默认插槽

插槽基本语法:

插槽 - 后备内容(默认值)

插槽 - 具名插槽

插槽 - 作用域插槽


插槽 - 默认插槽

作用:让组件内部的一些 结构 支持 自定义

需求: 将需要多次显示的对话框, 封装成一个组件

问题:组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办?

插槽基本语法:

  1. 组件内需要定制的结构部分,改用占位
  2. 使用组件时, 标签内部, 传入结构替换slot

场景:当组件内某一部分结构不确定,想要自定义怎么办?

用插槽 slot 占位封装

使用:插槽使用的基本步骤?

  1. 先在组件内用 slot 占位
  2. 使用组件时, 传入具体标签内容插入

插槽 - 后备内容(默认值)

插槽后备内容:封装组件时,可以为预留的 `` 插槽提供后备内容(默认内容)。

l 语法: 在 标签内,放置内容, 作为默认显示内容

l 效果:

l 外部使用组件时,不传东西,则slot会显示后备内容

如何给插槽设置默认显示内容?

在slot标签内,写好后备内容

什么时候插槽后备内容会显示?

当使用组件并未给我们传入具体标签或内容时

插槽 - 具名插槽

需求:一个组件内有多处结构,需要外部传入标签,进行定制

默认插槽:一个的定制位置

具名插槽语法:

具名插槽简化语法:

组件内 有多处不确定的结构 怎么办?

具名插槽

  1. slot占位, 给name属性起名字来区分
  2. template配合 v-slot:插槽名 分发内容

v-slot:插槽名 可以简化成什么?

#插槽名


插槽 - 作用域插槽

作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用。

场景:封装表格组件

  1. 父传子,动态渲染表格内容
  2. 利用默认插槽,定制操作列
  3. 删除或查看都需要用到 当前项的 id,属于 组件内部的数据 通过 作用域插槽 传值绑定,进而使用

作用域插槽的作用是什么?

可以给插槽上绑定数据,供将来使用组件时使用

作用域插槽使用步骤?

  • (1)给 slot 标签, 以 添加属性的方式传值
  • (2)所有属性都会被收集到一个对象中
  • (3)template中, 通过 ` #插槽名= "obj" ` 接收

标签:slot,14,作用域,插槽,内容,vue2,标签,组件
From: https://blog.csdn.net/2301_81051419/article/details/143746103

相关文章

  • [题解]CF1407D Discrete Centrifugal Jumps
    思路注意到第二个条件和第三个条件本质相似,可以用相同的维护方式处理,因此这个只讨论第二个条件的维护方式。定义\(dp_i\)表示走到\(i\)的最少步数。第一个条件的转移显然为\(dp_i\leftarrowdp_{i-1}\)。对于第二个条件,\(i\)能向\(j\)转移,当且仅当\(h_{i+1\sim......
  • P8314 [COCI2021-2022#4] Parkovi
    最大值最小是二分答案的特征。二分完后每个公园可以覆盖距离不超过\(k\)的领域,要覆盖整棵树。二分完后需要check。最可能的路线是贪心和dp。好像本质上都存储了可能成为答案的组合的部分信息,但贪心确定了这个组合当前的唯一性,dp并没有,只能保证最优解一定属于被划分出来的某......
  • 太强了!14.7K star!Windows系统居然还有开源替代版了?!
    在操作系统的世界里,Windows系统一直占据着重要的地位。然而,你可能不知道的是,还有一个拥有14.7Kstar的开源替代版——ReactOS。1、ReactOS介绍ReactOS是一个自由开源的操作系统,其目标是实现与Windows系统在二进制级别上的兼容。这意味着,我们可以在这个系统上直接运行那......
  • Alpha冲刺(1/14)——2024.11.12
    目录一、团队成员分工与进度二、成员任务问题及处理方式三、冲刺会议内容记录会议内容四、GitHub签入记录及项目运行截图GitHub签入记录项目运行截图五、项目开发进展及燃尽图项目开发进展燃尽图六、团队成员贡献表七、UML设计子用例及改进每日实现UML设计子用例时序图、状态图、......
  • Leetcode 148. 排序链表
    给你链表的头结点 head ,请将其按 升序 排列并返回 排序后的链表 。经典的分治算法应用,通过归并进行排序,需要用到一个与原数组相同长度的数组归(分割)思想如上图所示,代码实现通过快慢指针来寻找链表的中点来分割指针varspilitList=function(head){if(head===......
  • ElasticSearch 7.14 向已启用XPACK认证的集群增加新的节点
    一、环境现状描述:     目前的ElasticSearch集群仅有一个单一节点,且这个集群中已建立有索引,索引已包含业务文档数据(超过200G),该集群已经启用XPACK认证,现希望扩展这个集群,增加复制节点,且复制节点启动后,自动从主节点同步数据到新节点。     目前的ElasticSearch集群节点......
  • 代码随想录算法训练营第四天(LeetCode24.两两交换链表中的节点;LeetCode10.删除链表的倒
    LeetCode24.两两交换链表中的节点题目链接:两两交换链表中的节点题目链接思路这道题其实就是一个模拟题,要求每次交换链表中两个相邻的节点(1、2节点互换;3、4节点互换;2、3节点不互换,意思就是交换过的节点不参与后续的交换了),同时只能进行节点交换,不能进行值交换。主要考......
  • vue2相关
    v-html: 原始HTML双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML,你需要使用 v-html 指令:<p>Usingmustaches:{{rawHtml}}</p><p>Usingv-htmldirective:<spanv-html="rawHtml"></span></p>v-bind:AttributeMustache语法不能作用在......
  • 软件设计-Tutorial14
    ```mermaidclassDiagramMatchmakingService<|..RealMatchmakingServiceMatchmakingService<|..MatchmakingProxyclassMatchmakingService{+findPartner()}classRealMatchmakingService{+findPartner()}......
  • 考研打卡(14)
    开局(14)开始时间 2024-11-11 20:21:43结束时间 2024-11-11 22:00:55今天考研数学的资料到了数据结构设一组初始记录关键字序列为(50,40,95,20,15,70,60,45),则以增量d=4的一趟希尔排序结束后前4条记录关键字为_____(中国地质大学2017年)A40,50,20,95B15,40,60,20C15,20,......