总结/笔记-vue中的插槽(默认插槽、具名插槽、作用域插槽)

news2024/10/7 14:32:23

问题:

遇到了一个插槽,写法为 #default = ”{ row }“

插槽知识点:

定义

插槽,用于 在组件中 引用外部组件或自定义组件的内容。

即 子组件中提供给父组件使用的一个占位符,父组件可以在这个占位符中填充任何模板代码,填充的内容会替换子组件的标签。插槽的显不显示、如何显示是由父组件控制,插槽在哪显示子组件控制。

1. 默认插槽

v-slot:default#default,可省(name属性可以不写,即未定义名字的插槽

数据流:父组件 -> 子组件

例:引用子组件时,在子组件中插入一段内容,代码如下

在父组件中的传入要插到子组件的内容

2. 具名插槽

具名插槽,即 给插槽起名,给<slot></slot>定义一个name属性。

数据流:父组件 -> 子组件

作用:一个子组件可以放个插槽,父组件填充内容时,根据名字把内容填充到对应插槽中。

父组件 可以用 v-slot:name #name 往插槽中填充内容。

#插槽名  v-slot:插槽名 的简写形式

例子:

3. 作用域插槽

作用域插槽:带数据的插槽,即带参数的插槽。子组件提供给父组件参数,该参数仅限于插槽中使用,父组件可以根据子组件传过来的插槽数据 来进行不同方式的展示/填充插槽内容。

父组件通过 v-slot: 属性名 = “slotProps” 的slotProps(接受的变量)来获取子组件传出的属性,子组件中通过<slot  v-bind=属性名:"值"  name=“值”>来传递子组件的数据,数据存于 值 中

数据流:子组件 -> 父组件

适用场景:在父组件中访问子组件的数据;子组件的某部分数据,每个父组件都有不同方式/样式的呈现形式。

例子:

在<slot>上使用 v-bind绑定了 vue data 中的定义的数据。

总结与拓展:

1. slot 存在于 子组件,v-slot 在父组件,最终页面展示结果是父组件。

2. 可以通过解构获取 v-slot = { user },也可重命名 v-slot = “{ user: newName }” 和定义默认值 v-slot = “{ user = '默认值' }”

3. 插槽名 可以动态变化的 v-slot: [slotName]

注:

1. 默认插槽 dafault,可以省略default 直接写 v-slot,缩写为#时不能不写参数,要写成#default

2. 多个插槽混用时,v-slot不能省略default

软件开发原则:多扩展,少修改。

v-slot插槽的位置:

更推荐 将插槽 v-slot 写在<template>元素上,其处理过程不会渲染成真实的DOM节点。

也可用于其他HTML元素上,这样最终插入到子组件会有真实的DOM节点包裹。

另一说法表示,v-slot 属性只能在template上使用,只有默认插槽可以在组件标签上使用。(2020)

问题解决

片头提到的问题:  #default = ”{ row }“,为缩写的默认插槽,即 v-slot:defalut = "{ row }",其解构了,也对其进行重命名或定义默认值。

参考:详解Vue中的插槽用法:默认插槽、具名插槽、作用域插槽 - 掘金 (juejin.cn)

VUE作用域插槽详解(<slot>、v-slot、slot-scope)_别来打扰我的博客-CSDN博客

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

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

相关文章

【TI毫米波雷达笔记】ADCBuf外设初始化配置及驱动(以IWR6843AOP为例)

【TI毫米波雷达笔记】ADCBuf外设初始化配置及驱动&#xff08;以IWR6843AOP为例&#xff09; ADCBuf是为mmwave服务的 在配置之前需要配置好mmwave #include < ti/drivers/ADCBuf.h>对应mmwave studio&#xff1a; ADCBuf模块上电 调用&#xff1a; ADCBuf_init();A…

bash: cmake: command not found...+++++++lsb_release: command not found

一 .bash: cmake: command not found… centos中安装那个cmake。 1、问题 [rootPC3 home]# cmake bash: cmake: command not found... Similar command is: make当前系统&#xff1a; [rootPC3 home]# lsb_release -a LSB Version: :core-4.1-amd64:core-4.1-noarch:cxx…

dex2oat编译模式、触发场景、命令强制执行

dex2oat简单理解就是把delvik虚拟机的可执行文件dex转化成AndroidRuntime虚拟机的可执行文件oat。 Android T版本由PKMS下发命令、native层进程installd负责具体执行dex2oat操作。installd回去调用dex2oat64完成编译工作&#xff0c;可以将dex2oat64理解成一个程序。源码路径&…

本地使用GFPGAN进行图像人脸修复

人脸修复 1.下载项目和权重文件2.部署环境3.下载权重文件4.运行代码5.网页端体验 首先来看一下效果图 1.下载项目和权重文件 https://github.com/iptop/GFPGAN-for-Video.git2.部署环境 根据README文件部署好环境&#xff0c;额外还需要&#xff1a; cd GFPGAN-1.3.8 pyt…

在Qt创建的UI中放一个显示点云的窗口(PCL+QT5)

1、首先在Qt Designer创建UI后&#xff0c;拖一个Widget窗口出来 2、在对象查看器中右击该Widget&#xff0c;选择提升窗口部件&#xff0c;如下操作&#xff1a; 3、把UI转出来放在VS项目中&#xff0c;其中你的UI代码头文件会自带QVTKOpenGLNativeWidget.h&#xff0c;当然你…

企业专题片的优势

企业专题片可以通过生动、感人的方式传达企业形象和信息&#xff0c;引起观众的共鸣和兴趣。它是一种强有力的营销工具&#xff0c;能够提升品牌形象、增加产品或服务的认知度&#xff0c;并在激烈的市场竞争中突显企业的实力和成果。企业专题片具有多个好处和影响&#xff0c;…

【C语言】入门——数组

目录 ​编辑 1.一维数组的创建和初始化 1.1一维数组的创建&#xff1a; 1.2 一维数组的初始化 &#xff1a; 2.二维数组的创建的初始化 2.1二维数组的创建&#xff1a; 2.2二维数组的初始化&#xff1a; 3.数组越界 4.数组的使用 4.1一维数组的使用&#xff1a; 4.2二维…

1、PostgreSQL数据库的历史和特性简介

PostgreSQL是一个开源的关系型数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;它具有强大的功能和广泛的可扩展性&#xff0c;被广泛用于各种规模的应用程序和项目中。 一、PostgreSQL 的发展历史 PostgreSQL数据库的来历可以追溯到20世纪80年代末和90年代初。最早由…

MyBatisPlus入门篇1 - 入门案例、CRUD开发、Lombok、分页查询

目录 MyBatisPlus是基于MyBatis框架基础上开发的增强型工具&#xff0c;旨在简化开发、提高效率。 1.入门案例 ①创建SpringBoot项目&#xff0c;添加Spring Web和Mysql driver ②手动在pom.xml文件中添加mybatis plus和druid依赖 <dependency><groupId>com.b…

攻防世界-Get-the-key.txt

原题 解题思路 notepad看到&#xff0c;这应该是一个压缩包&#xff0c;解压。 但是解压的时候提示格式不对&#xff0c;不是zip&#xff0c;rar可以。解压出来有一个key.txt&#xff0c;打开就行。

taro h5 点击页面任意地方关闭弹窗组件 --- findDOMNode 判断点击节点是否属于某个组件

场景&#xff1a;如图&#xff0c;弹窗在大组件中&#xff0c;点击小组件显示弹窗&#xff0c;要求点击除弹窗外的任何元素都能关闭弹窗并且能执行元素原有的逻辑 方法一 最简单的是弹窗背后有一个覆盖整个页面的透明的cover, 点击直接关闭&#xff0c;但是这样虽然点击页面…

【算法篇】动态规划(二)

文章目录 分割回文字符串编辑距离不同的子序列动态规划解题思路 分割回文字符串 class Solution { public:bool isPal(string& s,int begin,int end){while(begin<end){if(s[begin]!s[end]){return false;}begin;end--;}return true;}int minCut(string s) {int lens.si…

便捷式发电机UL2201/UL2200测试报告要求

便携式发电机是一种燃料驱动的引擎或电机&#xff0c;可将化学能直接转换为交流电输出。便携式发电机可以随身携带&#xff0c;或用人力推拉移动。便携式发电机可能还包括更为复杂的便携式逆变发电机&#xff0c;这种发电机也由燃料驱动但内置交流逆变器。便携式电源逆变器可将…

react 初级基础

react基本使用 项目创建 项目的创建命令 npx create-react-app react-basic创建一个基本元素进行渲染 // 1 导入react 和 react-dom import React from "react"; import ReactDOM from "react-dom";// 2 创建 react 元素 React提供了创建元素的api Rea…

QCAD for Mac免费下载:卓越的2D辅助设计工具

QCAD是一款功能强大的2D辅助设计画图软件&#xff0c;现已适配Mac系统&#xff0c;为Mac用户提供了便捷高效的设计工具。 QCAD提供了丰富的绘图功能&#xff0c;可以轻松绘制各种平面图形&#xff0c;包括直线、圆、椭圆、弧线等。 同时&#xff0c;QCAD还支持多种绘图工具&am…

webpack打包常用配置项

webpack打包配置项 参考链接 文件结构&#xff1a;最基础版 先安装 npm i webpack webpack-cli --dev 运行命令&#xff1a;npx webpack 进行打包 1. 配置webpack.config.js文件&#xff1a; const path require(path); module.exports {mode: development, // 开发环境 …

聊聊如何玩转spring-boot-admin

前言 1、何为spring-boot-admin&#xff1f; Spring Boot Admin 是一个监控工具&#xff0c;旨在以良好且易于访问的方式可视化 Spring Boot Actuators 提供的信息 快速开始 如何搭建spring-boot-admin-server 1、在服务端项目的POM引入相应的GAV <dependency><grou…

Linux之NFS服务器

目录 Linux之NFS服务器 简介 NFS背景介绍 生产应用场景 NFS工作原理 NFS工作流程图 流程 NFS的安装 安装nfs服务 安装rpc服务 启动rpcbind服务同时设置开机自启动 启动nfs服务同时设置开机自启动 NFS的配置文件 主配置文件分析 示例 案例 --- 建立NFS服务器&#…

4、QT中的网络编程

一、Linux中的网络编程 1、子网和公网的概念 子网网络&#xff1a;局域网&#xff0c;只能进行内网的通信公网网络&#xff1a;因特网&#xff0c;服务器等可以进行远程的通信 2、网络分层模型 4层模型&#xff1a;应用层、传输层、网络层、物理层 应用层&#xff1a;用户自…

C++核心基础教程之STL容器详解 vector容器的概述 vector常见的API

容器作用域迭代器 就是定义一个迭代器&#xff0c;迭代器的名称叫it 保存起始迭代器 *it int 相当与取内容&#xff0c;像指针&#xff0c;但不是指针&#xff0c;因为底层很多细节 vector 一次开辟两倍原来的空间 另辟空间 迭代器右边是开区间&#xff0c;不包含右端…