当前位置: 首页 > news >正文

插槽(64-67)

文章目录

  • 插槽
    • 1.插槽 - 默认插槽(组件内可以定制一处结构)
    • 2.插槽 - 后备内容(默认值)
    • 3.插槽 - 具名插槽(组件内可以定制多处结构)
    • 4.作用域插槽(插槽的一个传参语法)

插槽

插槽分类:默认插槽和具名插槽

1.插槽 - 默认插槽(组件内可以定制一处结构)

作用:让租价内部的一些结构支持自定义
需求:要在页面中显示一个对话框,封装成一个组件
问题:组件的内容部分,不希望写死,希望能够使用的时候自定义怎么办?(插槽)

在这里插入图片描述
插槽的基本语法:

  1. 组件内需要定制的结构部分,改用<slot></slot>
  2. 使用组件时,<MyDialog></MyDialog>内部标签,传入结构替换slot
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3></div><div class="dialog-content"><slot></slot>//用slot占位  //<MyDialog>你去确定要退出本系统吗</div>							<MyDialog>	//会被填入slot位置<div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template>
App.vue
<template><div><!-- 在我们使用组件时,在组建标签内填入内容 --><MyDialog>你确认要删除吗</MyDialog><MyDialog>你确认要退出吗</MyDialog></div>
</template>~.vue
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖️</span></div><div class="dialog-content"><!-- 在需要定制的位置,使用slot占位 --><slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template>

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

前言:通过插槽完成了内容的定制,传什么显示什么,但是如果不传,则是空白
插槽的后备内容:封装组件时,可以为预留的```插槽提供后备内容(默认内容)

语法:在<slot>标签内,防止内容,作为默认内容

3.插槽 - 具名插槽(组件内可以定制多处结构)

需求:一个组件内有多处结构,需要外部传入标签。进行定制
默认插槽:一个的定制位置

具名插槽语法:

  1. 多个slot使用name属性区分名字
    在这里插入图片描述
  2. template配合v-slot名字来分发对应的标签
    在这里插入图片描述
  3. v-slot:插槽名 可以简化成 #插槽名
    在这里插入图片描述

4.作用域插槽(插槽的一个传参语法)

作用域插槽:定义 slot 插槽的同时,是可以传值的.给插槽上可以绑定数据,将来使用组件时可以用
场景:封装表格组件(表格长得一样,但是数据不一样)
在这里插入图片描述
在这里插入图片描述

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

基本使用步骤:

  1. slot标签,以添加属性的方式传值
    在这里插入图片描述
  2. 所有添加的属性,都会被收集到一个对象中
    在这里插入图片描述
  3. template.同股票 #插槽名="obj"接收(这个obj``是一个局部变量,我们可以起成不同的名字),默认插槽名为default`
    在这里插入图片描述
App.vue
<template><div><MyTable :data="list"><template #default="obj"><!--通过template #插槽名="变量名"接收--><button @click="del(obj.row.id)">删除</button></template></MyTable><MyTable :data="list2"><template #default="{ row }"><button @click="show(row)">查看</button></template></MyTable></div>
</template><script>
import MyTable from './components/MyTable.vue'
export default {data () {return {list: [{ id: 1, name: '张小花', age: 18 },{ id: 2, name: '孙大明', age: 19 },{ id: 3, name: '刘德忠', age: 17 },],list2: [{ id: 1, name: '赵小云', age: 18 },{ id: 2, name: '刘蓓蓓', age: 19 },{ id: 3, name: '姜肖泰', age: 17 },]}},methods:{del(id){this.list=this.list.filter(item => item.id !==id)}, show (row) {console.loh(row)alert(`姓名: ${row.name}; 年纪: ${row.age}`)}},components: {MyTable}
}
</script>~.vue
<template><table class="my-table"><thead><tr><th>序号</th><th>姓名</th><th>年纪</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in data" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td><!-- 1.给slot标签,添加属性名以传参 --><slot :row="item" msg="测试文本"></slot><!--苛以在插槽的位置传参,方便删除del()--><!-- 2.将所有属性,添加到一个对象中 --><!--{row:{id:2,name:'孙大明',age:19},msg:'测试文本'}--></td></tr></tbody></table>
</template><script>
export default {props: {data: Array,},
}
</script>

在这里插入图片描述

相关文章:

插槽(64-67)

文章目录 插槽1.插槽 - 默认插槽(组件内可以定制一处结构)2.插槽 - 后备内容&#xff08;默认值&#xff09;3.插槽 - 具名插槽(组件内可以定制多处结构)4.作用域插槽(插槽的一个传参语法) 插槽 插槽分类:默认插槽和具名插槽 1.插槽 - 默认插槽(组件内可以定制一处结构) 作用…...

C# LING查询语法学习,扩展方法的使用

class Program { #region 示例1&#xff1a;不使用LINQ查询数组 //static void Main(string[] args) //{ // int[] nums { 1, 7, 2, 6, 5, 4, 9, 13, 20 }; // List<int> list new List<int>(); // foreach (int item in nums) …...

自然语言推断:微调BERT

微调BERT 自然语言推断任务设计了一个基于注意力的结构。现在&#xff0c;我们通过微调BERT来重新审视这项任务。自然语言推断是一个序列级别的文本对分类问题&#xff0c;而微调BERT只需要一个额外的基于多层感知机的架构&#xff0c;如下图中所示。 本节将下载一个预训练好的…...

立创EDA学习:设计收尾工作

布线整理 ShiftM&#xff0c;关闭铺铜显示 调整结束后再使用快捷键”ShiftM“打开铺铜 过孔 在空白区域加上一些GND过孔&#xff0c;连接顶层与底层的铺铜。放置好”过孔“后&#xff0c;隐藏铺铜&#xff0c;观察刚才放置的过孔有没有妨碍到其他器件 调整铺铜 先打开铺铜区&…...

ShardingSphere之ShardingJDBC客户端分库分表上

目录 什么是ShardingSphere&#xff1f; 客户端分库分表与服务端分库分表 ShardingJDBC客户端分库分表 ShardingProxy服务端分库分表 ShardingSphere实现分库分表的核心概念 ShardingJDBC实战 什么是ShardingSphere&#xff1f; ShardingSphere是一款起源于当当网内部的应…...

rust for循环步长-1,反向逆序遍历

fn main() {for i in (0..3).rev().step_by(1) {print!("{}", i);} } // 打印结果&#xff1a;210Trait std::iter::Iterator fn rev(self) -> Rev< Self > where Self: Sized DoubleEndedIteratorfn step_by(self, step: usize) -> StepBy< Self &…...

编译与运行环境(C语言)

文章目录 前言编译环境编译链接 运行环境 前言 C语言代码的实现&#xff0c;存在两种不同的环境。 第一种是翻译环境&#xff0c;在这个环境中&#xff0c;源代码被转换为可执行的二进制指令。 翻译环境即我们日常使用编译器&#xff0c;将一个 " mission.c " 的文件…...

再谈Android View绘制流程

一&#xff0c;先思考何时开始绘制 笔者在这里提醒读者&#xff0c;Android的View是UI的高级抽象&#xff0c;我们平时使用的XML文件也好&#xff0c;本质是设计模式中的一种策略模式&#xff0c;其View可以理解为一种底层UI显示的Request。各种VIew的排布&#xff0c;来自于开…...

分布式定时任务系列8:XXL-job源码分析之远程调用

传送门 分布式定时任务系列1&#xff1a;XXL-job安装 分布式定时任务系列2&#xff1a;XXL-job使用 分布式定时任务系列3&#xff1a;任务执行引擎设计 分布式定时任务系列4&#xff1a;任务执行引擎设计续 分布式定时任务系列5&#xff1a;XXL-job中blockingQueue的应用 …...

python+Qt5 UOS 摄相头+麦克风测试,摄相头自动解析照片二维条码,麦克风解析音频文件

UI图片&#xff1a; 源代码&#xff1a; # -*- coding: utf-8 -*-# Form implementation generated from reading ui file CameraTestFrm.ui # # Created by: PyQt5 UI code generator 5.15.2 # # WARNING: Any manual changes made to this file will be lost when pyuic5 is…...

MongoDB日期存储与查询、@Query、嵌套字段查询实战总结

缘由 MongoDB数据库如下&#xff1a; 如上截图&#xff0c;使用MongoDB客户端工具DataGrip&#xff0c;在filter过滤框输入{ profiles.alias: 逆天子, profiles.channel: }&#xff0c;即可实现昵称和渠道多个嵌套字段过滤查询。 现有业务需求&#xff1a;用Java代码来查询…...

Windows版本Node.js常见问题及操作解决方式(小白入门必备)

npm i时ERROR:reason: certificate has expired问题 https://blog.csdn.net/m0_73360677/article/details/135774500 # 1.取消ssl验证&#xff1b;npm config set strict-ssl false#这个方法一般可以直接解决问题&#xff0c;如不能请尝试第二种方法# 2.更换npm镜像源&#x…...

09.Elasticsearch应用(九)

Elasticsearch应用&#xff08;九&#xff09; 1.搜索结果处理包括什么 排序分页高亮返回指定字段 2.排序 介绍 Elasticsearch支持对搜索结果排序&#xff0c;默认是根据相关度算分来排序 支持排序的字段 keyword数值地理坐标日期类型 排序语法 GET /[索引名称]/_sear…...

ROS2常用命令工具

ROS2常用命令工具 包管理工具ros2 pkg ros2 pkg create ros2 pkg create --build-type ament_python pkg_name rclpy std_msgs sensor_msgs –build-type : C或者C ament_cmake &#xff0c;Python ament_python pkg_name &#xff1a;创建功能包的名字 rclpy std_msgs sens…...

Linux之快速入门

一、Linux目录结构 从Windows转到Linux最不习惯的是什么&#xff1a; 目录结构 Windows会分盘&#xff0c;想怎么放东西就怎么放东西&#xff0c;好处自由&#xff0c;缺点容易乱 Linux有自己的目录结构&#xff0c;不能随随便便放东西 /&#xff1a;根目录/bin:二进制文件&…...

C语言——操作符详解1

目录 1. 操作符的分类2. 二进制和进制转换2.1 二进制的概念2.2 二进制转十进制2.3 十进制转二进制2.4 二进制转八进制和十六进制2.4.1 二进制转八进制二进制转十六进制 3. 原码、反码和补码4. 移位操作符4.1 左移操作符4.2 右移操作符 5. 位操作符5.1 &5.2 |5.3 ^5.4 ~ 1. …...

C++学习| QT快速入门

QT简单入门 QT Creater创建QT项目选择项目类型——不同项目类型的区别输入项目名字和路径选择合适的构建系统——不同构建系统的却别选择合适的类——QT基本类之间的关系Translation File选择构建套件——MinGW和MSVC的区别 简单案例&#xff1a;加法器设计界面——构建加法器界…...

Android App开发-简单控件(1)——文本显示

本章介绍了App开发常见的几类简单控件的用法&#xff0c;主要包括&#xff1a;显示文字的文本视图、容纳视图的常用布局、响应点击的按钮控件、显示图片的图像视图等。然后结合本章所涉及的知识&#xff0c;完成一个实战项目“简单计算器”的设计与实现。 1.1 文本显示 本节介绍…...

[GYCTF2020]Ezsqli1

打开环境&#xff0c;下面有个提交表单 提交1&#xff0c;2有正确的查询结果&#xff0c;3以后都显示Error Occured When Fetch Result. 题目是sql&#xff0c;应该考察的是sql注入 简单fuzz一下 发现information_schema被过滤了&#xff0c;猜测是盲注了。 测试发现只要有东…...

【npm包】如何发布自己的npm包

随着Node.js的普及&#xff0c;npm&#xff08;Node Package Manager&#xff09;已成为JavaScript开发者中不可或缺的一部分。发布自己的npm包&#xff0c;不仅可以将自己的项目分享给更多人&#xff0c;还可以为社区做出贡献。本文将详细介绍如何从零开始发布自己的npm包。 …...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...