vue插槽使用总结

news2024/12/23 15:08:12

  • 什么是插槽
  • 解决什么问题
  • 插槽的分类
    • 默认插槽
    • 具名插槽
    • 作用域插槽

什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。

解决什么问题

在父组件中引用的子组件的同时,希望在子组件的指定位置插入一段内容,

插槽的分类

默认插槽

默认插槽顾名思义就是默认中的,默认的插槽为直接写在子组件标签内部的,在子组件中用slot标签接收

在子组件中放入一个占位符
在这里插入图片描述
在父组件中给这个占位符填充内容

在这里插入图片描述
展示的效果
在这里插入图片描述
思考: 如果子组件中没有放插槽,同样的父组件中在子组件中填充内容,会出现什么问题?

在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述
总结:
如果子组件没有使用插槽,父组件如果需要往子组件中填充模板或者html, 是没法做到的

具名插槽

具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。

子组件的代码,设置了两个插槽(header和footer):
在这里插入图片描述
父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

在这里插入图片描述
展示效果
在这里插入图片描述
总结:
父组件填充内容时,是可以根据这个名字把内容填充到对应插槽中的,即使父组件对插槽的填充的顺序打乱,只要名字对应上了,就可以正确渲染到对应的插槽中。

作用域插槽

作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

使用方法:

子组件存放一个带数据的插槽: userInfo和jobInfo、lookInfo是子组件传给父组件的参数

<template>
  <div>
    <h3>这是作用域插槽 - 子组件</h3>
    <p>作用域插槽内容展示部分</p>
    <div>
      <h4>
        默认插槽,其实默认插槽也是name="default"的一个具名插槽的简写
      </h4>
      <slot :sonMsg="sonMsg"></slot>
      <hr>
      <slot name="nameSlot"></slot>
      <hr>
      <h4>多个参数</h4>
      <slot name="userInfo"
            :userInfo="{name: name, age, isWeading}"
            :jobInfo="{work, workAge, motto}"
            :lookInfo="{height, weight}">
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sonMsg: '这是子组件中的内容信息',
      name: '赵二丫',
      age: 28,
      isWeading: 'No',
      work: "程序员",
      workAge: "n多年",
      motto: "地球不爆炸,我们不放假",
      height: '165cm',
      weight: '100kg'
    }
  },
}
</script>

<style lang="scss" scoped>
</style>

父组件通过 老版本(即为vue2.6.0之前的)中使用slot-scope来接收子组件传过来的插槽数据,新版本则更简单,再根据插槽数据来填充插槽的内容

<template>
  <div class="conteiner">
    <h2>这是作用域插槽 - 作用域插槽父组件</h2>
    <p style="color: #f00;">
      作用域插槽为在插槽中,为父元素的环境,
      想使用子组件环境中的变量,算是插槽的传值方式
    </p>
    <p>作用域插槽子组件调用,以及作用域插槽的使用</p>
    <hr />
    <div>
      <son>
        <template v-slot="sonMsgProp">
          <h3>首先是默认插槽</h3>
          <div>在父组件中的信息:{{msg}}</div>
          <div>这是子组件中的信息: {{sonMsgProp.sonMsg}}</div>
        </template>
        <template #nameSlot="sonMsgProp">
          <h3>然后是具名插槽</h3>
          <p>具名插槽的简单使用</p>
          <div>在父组件中的信息:{{msg}}</div>
          <div>这是子组件中的信息: {{sonMsgProp.sonMsg}}</div>
        </template>
        <template #userInfo="{userInfo, jobInfo, familyInfo={members: '未知'}, lookInfo: goddesInfo}">
          <h3>传入多个参数</h3>
          <p>
            传入多个参数,可以使用解构的方式传入,
            当然也可以设置默认值和设置别名,在传入的值不存在时候会用默认的值
          </p>
          <dl>
            <dt>个人信息</dt>
            <dd>姓名:{{userInfo.name}}</dd>
            <dd>年龄:{{userInfo.age}}</dd>
            <dd>已婚:{{userInfo.isWeading}}</dd>
          </dl>
          <dl>
            <dt>工作信息</dt>
            <dd>工作:{{jobInfo.work}}</dd>
            <dd>工龄:{{jobInfo.workAge}}</dd>
            <dd>格言:{{jobInfo.motto}}</dd>
          </dl>
          <dl>
            <dt>家庭情况</dt>
            <dd>家庭成员:{{familyInfo.members}}</dd>
          </dl>
          <dl>
            <dt>身体情况</dt>
            <dd>升高:{{goddesInfo.height}}</dd>
            <dd>体重:{{goddesInfo.weight}}</dd>
          </dl>
        </template>
      </son>
    </div>
  </div>
</template>

<script>
import Son from './Son.vue';
export default {
  components: {
    Son,
  },
  data () {
    return {
      msg: '这是父组件中的信息'
    }
  },
}
</script>

<style lang="scss" scoped>
</style>

如果子组件中的某一部分的数据,每个父组件都会有自己的一套对该数据的不同的呈现方式,这时就需要用到作用域插槽。

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

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

相关文章

Arcgis小技巧【13】——数据统计(Statistics)相关工具汇总

在Arcgis中可以通过属性表中字段的【统计】功能或使用统计相关的工具对属性表进行数据统计。 在Arcgis工具箱中有一组【统计分析】工具集&#xff0c;不仅包含对属性数据执行标准统计分析&#xff08;例如平均值、最小值、最大值和标准差&#xff09;的工具&#xff0c;也包含…

理解时序数据库的时间线

在当今数据爆炸的时代&#xff0c;时序数据已经成为企业和组织中不可或缺的一部分。它们包括了从传感器、监控设备、日志记录系统和金融交易等多种来源的大量数据&#xff0c;这些数据按照时间顺序排列&#xff0c;记录了各种事件和活动的发生和变化。时序数据的分析和处理对于…

通过python封装1688图片搜索商品数据接口,拍立淘API接口

1688图片搜索API封装接口是一个可以帮助用户快速使用1688图片搜索API的接口封装库。该接口封装库可以帮助用户快速引入1688图片搜索API&#xff0c;并提供各种参数配置和封装的API调用方法&#xff0c;以方便用户快速实现自己的图片搜索需求。 该接口封装库将1688图片搜索API的…

Redis Hash(散列表)实现原理看这篇就够了

1. 是什么 Redis Hash&#xff08;散列表&#xff09;是一种 field-value pairs&#xff08;键值对&#xff09;集合类型&#xff0c;类似于 Python 中的字典、Java 中的 HashMap。一个 field 对应一个 value&#xff0c;你可以通过 field 在 O(1) 时间复杂度查 field 找关联的…

Qt+QtWebApp开发笔记(四):http服务器使用Session和Cookie实现用户密码登录和注销功能

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/130921152 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

信号量对象没有所有者

相较于互斥对象(Mutex)和临界区对象(Critical Section) &#xff0c;信号量没有所有者&#xff0c;它们只有计数。 ReleaseSemaphore 函数将会以指定的数量增加对应信号量对象的计数。 (增加计数这个动作&#xff0c;可能会释放正在等待的线程&#xff09;但是释放信号量的线程…

metaIPC2.0 SDK实现webRTC对讲IPC

概述 metaRTC新推出P2P版metaIPC2.0 sdk版本&#xff0c;基于mqtt通信&#xff0c;同时支持windows/linux/android操作系统&#xff0c;支持国内如海思/君正/瑞芯微/MSTAR等主流芯片。 metaIPC2.0支持linux/android/windows IPC&#xff0c;客户端支持浏览器/APP/windows和li…

【JavaSE】Java基础语法(二十七):Set集合和 TreeSet

文章目录 1. Set集合1.1Set集合概述和特点【应用】1.2Set集合的使用【应用】 2.TreeSet集合2.1TreeSet集合概述和特点【应用】2.2TreeSet集合基本使用【应用】2.3自然排序Comparable的使用【应用】2.4比较器排序Comparator的使用【应用】2.4两种比较方式总结 1. Set集合 1.1Se…

数据库必备知识:脏读和幻读的定义及应对策略

随着数据库应用的广泛使用&#xff0c;数据库并发性和一致性的问题成为了引起重视的问题之一。其中&#xff0c;脏读&#xff08;Dirty Read&#xff09;和幻读&#xff08;Phantom Read&#xff09;是常见的并发访问问题&#xff0c;本文将对脏读、幻读进行详细介绍&#xff0…

炸裂!GPT-4 开始自主进化,打造一个虚拟世界!

公众号关注 “GitHubDaily” 设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01; 此前 GitHub 曾诞生过一个名为 Auto-GPT 的开源项目&#xff0c;让 AI 能够根据人类给出的目的&#xff0c;自动设定任务的优先级&#xff0c;尝试自行优化代码、自动改 Bug 等操作。不得不…

2024考研408-计算机组成原理第一章-计算机系统概述

文章目录 起步&#xff1a;认识计算机一、计算机发展历程1.1、什么是计算机系统1.2、计算机硬件的发展1.2.1、总览四代发展1.2.2、四代发展详细介绍1.2.3、计算机硬件的发展历史1.2.4、摩尔定律介绍 1.3、计算机软件的发展1.3.1、软件的发展1.3.2、目前的发展趋势 知识回顾与重…

Redis中的Reactor模型和执行命令源码探索

文章目录 摘要1、 了解Linux的epoll2、了解Reactor模型 一、Redis初始化1.1、配置初始化1.2、服务初始化1.3、网络监听初始化1.4、Reactor线程池初始化1.5、Reactor事件主循环 二、Reactor2.1、Reactor事件处理器2.2、读事件2.2.1、第一次读事件&#xff08;accept&#xff09;…

基于MATALB编程的深度信念网络DBN的01分类编码三分类预测,DBN算法详细原理

目录 背影 DBN神经网络的原理 DBN神经网络的定义 受限玻尔兹曼机(RBM) DBN的语音分类识别 基本结构 主要参数 数据 MATALB代码 结果图 展望 背影 DBN是一种深度学习神经网络,拥有提取特征,非监督学习的能力,是一种非常好的分类算法,本文将DBN算法对数据采用01编码分析…

【数据湖仓架构】数据湖和仓库:Azure Synapse 视角

是时候将数据分析迁移到云端了。我们将讨论 Azure Synapse 在数据湖和数据仓库范式规模上的定位。 在本文中&#xff0c;我们将讨论 Microsoft 的 Azure Synapse Analytics 框架。具体来说&#xff0c;我们关注如何在其中看到数据仓库和数据湖范式的区别。为了熟悉这个主题&…

【Linux】Linux环境基础工具的基本使用及配置(yum、vim)

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;Linux &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 Linux软件包管理器 - y…

60分钟吃掉detectron2

本范例演示使用非常有名的目标检测框架detectron2 &#x1f917;&#x1f917; 在自己的数据集(balloon数据)上训练实例分割模型MaskRCNN的方法。 detectron2框架的设计有以下一些优点&#xff1a; 1&#xff0c;强大&#xff1a;提供了包括目标检测、实例分割、全景分割等非常…

Spring Boot启动流程

1 Springboot 启动流程 创建一个StopWatch实例&#xff0c;用来记录SpringBoot的启动时间。 通过SpringFactoriesLoader加载listeners&#xff1a;比如EventPublishingRunListener。 发布SprintBoot开始启动事件&#xff08;EventPublishingRunListener#starting()&#xff0…

性能测试——基本性能监控系统使用

这里写目录标题 一、基本性能监控系统组成二、环境搭建1、准备数据文件 type.db collectd.conf2、启动InfluxDB3、启动grafana4、启动collectd5、Grafana中配置数据源 一、基本性能监控系统组成 Collectd InfluxdDB Grafana Collectd 是一个守护(daemon)进程&#xff0c;用来…

【数据结构】时间复杂度与空间复杂度

目录 前言一、算法效率1. 算法效率的定义 二、时间复杂度1. 时间复杂度的定义2. 时间复杂度的计算 三、空间复杂度1. 空间复杂度的定义2. 空间复杂度的计算 四、时间复杂度曲线图结尾 前言 在学习C语言的时候&#xff0c;大多数的小伙伴们并不会对算法的效率了解&#xff0c;也…

视频采集到录制 - 音频采集到降噪

继续上篇的视频采集到录制 视频采集相对来说还是算正常&#xff0c;如果资源够用&#xff0c;使用第三方库也是种解决办法 但音频采集网上资料相对也少&#xff0c;走了一遍&#xff0c;也发现存在很多坑 1. 音频采集 一般来说&#xff0c;采用MIC采集&#xff0c;采集出来的格…