vue组件中插槽slot的使用

news2024/11/17 2:43:42

目录

插槽

1、组件的三大核心:属性(data、props)、事件、插槽

2、插槽(slot):将子组件和父组件进行组合,可以弥补视图的不足。使组件具有更好的扩展性

组件的封装方式:抽取共性、保留不同

3、插槽的使用方式:

(1)vue2.6以前的版本:

(2)Vue2.6以后的版本:插槽使用统一的新的语法(指令),用来取代 和slot-scope


插槽

1、组件的三大核心:属性(data、props)、事件、插槽

2、插槽(slot):将子组件和父组件进行组合,可以弥补视图的不足。使组件具有更好的扩展性

组件的封装方式:抽取共性、保留不同

3、插槽的使用方式:

(1)vue2.6以前的版本:

​ A、匿名插槽(默认插槽):一个组件中有且只能有一个

 <div>
    <h2>子组件</h2>
    <slot></slot> <!-- 匿名插槽:预留的位置,具体放什么元素由该组件的使用者决定-->
    <p>Hello World!</p>
  </div>

​ B、具名插槽:给插槽命名,将子组件挂载至父组件

​ C、作用域插槽:父组件显示不同的页面结构,页面中的数据来自于子组件 

标题

(2)Vue2.6以后的版本:插槽使用统一的新的语法(指令),用来取代 和slot-scope

​ A、匿名插槽(默认插槽):在父组件中使用v-slot指令

​ B、具名插槽:和原版本相同

​ C、作用域插槽:

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

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

相关文章

CMMI五大成熟度定义及过程管理类详解

一、成熟度级别CMMI组织的成熟度级别提供了描述其绩效特征的方式。经验表明&#xff0c;当组织每次过程改进工作所专注的过程域在数量上易管理时&#xff0c;组织能够做到最好&#xff1b;那些领域随着组织的改进&#xff0c;也需要不断成熟。成熟度级别是组织级过程改进的预定…

ADI边缘 AI MCU,助力从万物互联到万物智联

物联网被视为继计算机、互联网之后世界信息产业发展的第三次浪潮。据 IoT Analytics 在 2022 年 5月发布的《物联网现状 2022 年春季版》报告显示&#xff0c;2021 年全球物联网连接数量增长 8%&#xff0c;达到 122 亿个活跃端点&#xff1b;到 2022 年&#xff0c;物联网市场…

【KANO】需求管理模型

1.什么是Kano模型 Kano模型就是一个可以帮助我们有效识别“真伪需求”、划分需求优先级的有效工具。Kano模型是东京理工大学教授狩野纪昭&#xff08;Noriaki Kano&#xff09;发明的对用户需求分类和优先排序的有用工具&#xff0c;以分析用户需求对用户满意的影响为基础&…

【分享】原力计划的初衷 【探讨】新的一年,你对原力计划有哪些期待?

课前小差 哈喽&#xff0c;大家好&#xff0c;我是几何心凉&#xff0c;这是一份全新的专栏&#xff0c;唯一得倒CSDN王总的授权&#xff0c;来对于我们每周四的绿萝时间 ——【直达CSDN】直播内容进行总结概括&#xff0c;让大家能够省去看直播回放的时间也能够了解直播内容和…

JavaScript创建对象的方式

概述 JavaScript有多种创建对象的方式。 方式一&#xff1a;newfunction构造函数 function DogFactory(type, color) {this.type typethis.color color } // 方式一&#xff1a;new var dog new DogFactory(Dog, Black); console.log(dog) // new DogFactory(Dog, Black)…

jpeg压缩原理简述

一、色彩空间转换(RGB→YCrCb) 这一步没有数据删除&#xff0c;是可逆的步骤 YCbCr 是在世界数字组织视频标准研制过程中作为ITU - R BT1601 建议的一部分,其实是YUV经过缩放和偏移的翻版。其中Y与YUV 中的Y含义一致, Cb , Cr 同样都指色彩, 只是在表示方法上不同而已。在YUV家…

Android本地服务器NanoHttpd配置Https双向认证

一、 了解数字证书 在HTTPS的传输过程中&#xff0c;有一个非常关键的角色——数字证书&#xff0c;那什么是数字证书&#xff1f;又有什么作用呢&#xff1f; 所谓数字证书&#xff0c;是一种用于电脑的身份识别机制。由数字证书颁发机构&#xff08;CA&#xff09;对使用私…

超实用的办公小技巧,上班族必看

技巧一&#xff1a;使用“PS”来合并 这个方法大家是不是觉得有点出乎意料呢&#xff1f;虽然PS是一个图像处理的工具&#xff0c;但它总是有些我们想不到的功能。下面就给大家介绍一下究竟要怎么利用它来合并PDF文件。 使用感受&#xff1a;的确是可以合并多个PDF文件的&…

《啊哈算法》第二章栈,队列,链表(解析+代码)

从无到有学算法 吾日三省吾身&#xff0c;今天有写代码乎?&#x1f644; &#x1f644;抠门渣男语录&#xff1a;我的果汁分你一半&#xff08;月亮弯弯 绵绵绵绵缠缠&#xff09; - 李金源 - 单曲 - 网易云音乐 千年之后的你在哪里&#xff1a;星月神话 - 我觉得我还能再吃…

CACHE 概念

CACHE 概念 CPU 读写指令或者数据&#xff0c;可能直接从寄存器查取&#xff0c;也可能经过 TLB &#xff0c;经过 MMU&#xff0c;经过高速缓存&#xff0c;经过内存&#xff0c;经过外部存储器。这里面有一个 Cache 的概念&#xff0c;想多了解下了&#xff0c;于是有这这一…

【自定义类型】带你走进结构体、枚举、联合

欢迎来到小王学代码的博客 在字符型函数之后&#xff0c;我们接下来要学习的是自定义类型中的结构体、枚举、联合 目录 前言 一、结构体 1.1结构体的声明 1.2 特殊声明和结构自引用 1.4结构体的自引用 1.5结构体变量的定义和初始化 1.6 结构体内存对齐 1.7修改默认对齐…

【杂烩】Latex中的一些技巧备忘录

1. subfigure 和 minipage 环境的运用 首先是多张图组合到一起&#xff0c;左侧和下方备注列标题和行标题。 使用的时候需要的包&#xff1a; minipage不需要 \usepackage{subfigure} \usepackage{graphicx}代码1&#xff1a; \begin{figure*}[htbp]\centering%第一行图片展…

微信小程序怎么实现拍照功能,以及授权,拍完照保存到本地。

写微信小程序就是要不停的翻阅官方文档查阅所需要的需求。API的使用说明wx.getSetting 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 scope.camera相机wx.authorize 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获…

复盘!!指针 ,地址 ,数组之间的联系

文章目录前言一、直接看题二、直接上代码总结前言 工作摸鱼 闲来无事 一、直接看题 二、直接上代码 所以&#xff0c;这个题目答案是5. 我来盘给你&#xff1a;int a[5] {1,2,3,4,5}; 1数组名本身就是表示数组首元素地址 2对数组名取地址&#xff1a;表示的是整个数组的地址…

Android抓包Charles入门教程

Android抓包工具有很多&#xff0c;有轻量的如httpCanary直接安装在手机上通过代理进行抓包&#xff0c;有功能强大的WireShark PC 端的抓包工具&#xff08;也要设置代理啦&#xff09;,还有老牌抓包工具Finder和Charles以及mitmproxy 。 手机上的抓包工具远离基本差不多&…

MAC(m1)-CentOS8 Docker设置MySQL数据持久化

Docker安装部署Mysql8的过程(以作数据持久化)_docker_脚本之家 Docker安装Mysql并映射_小小小果子的博客-CSDN博客_docker mysql 映射 Docker中安装mysql并把配置等挂载在外面(开启多个mysql)_遗忘de神话的博客-CSDN博客_dock中安装了mysql,还能在外部再安装一个mysql吗 mys…

Windows实时运动控制软核(五):LOCAL高速接口测试之VC6.0

今天&#xff0c;正运动小助手给大家分享一下MotionRT7的安装和使用&#xff0c;以及使用VC6.0对MotionRT7开发的前期准备。 01 MotionRT7简介 MotionRT7是深圳市正运动技术推出的跨平台运动控制实时内核&#xff0c;也是国内首家完全自主自研&#xff0c; 自主可控的Windows…

电脑怎么录制屏幕视频,3种方法,轻松弄懂

在日常生活当中&#xff0c;电脑录屏的使用场景也变得越来越多了起来&#xff0c;网课录制&#xff0c;微课录制&#xff0c;直播录制&#xff0c;会议录制等等。那么问题来了&#xff0c;电脑怎么录制屏幕视频呢&#xff1f;今天小编就向大家分享3个电脑录制屏幕视频的方法&am…

osg fbo(一),生成颜色缓冲区图片

由于工作需要&#xff0c;重新捡了下shader。很明显&#xff0c;fbo是重中之重。好记性不如烂笔头&#xff0c;先记录下 1&#xff0c;生成一个颜色纹理(为了省事&#xff0c;可以将纹理宽高屏幕宽高) osg::ref_ptr<osg::Texture2D> tex createFloatRectangleTexture(…

Linux安装Docker详细教程

文章目录Docker架构环境说明安装步骤阿里云镜像加速Docker底层原理Docker架构 镜像&#xff08;image&#xff09;: Docker 镜像&#xff08;Image&#xff09;就是一个只读的模板。镜像可以用来创建 Docker 容器&#xff0c;一个镜像可以创建很多容器。 就好似 Java 中的 类和…