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

vue插槽是什么?如何使用?

1、意义

插槽是vue提供的一个内置组件,是一个占位符。作用是可以向组件中传递一段html代码,加强了组件封装性以及复用性。

2、分类

插槽通常分为匿名插槽、具名插槽、作用域插槽

匿名插槽:

顾名思义就是没有名字的插槽,我们通常是通过匿名插槽把我们在子组件标签内写的html全部渲染到子组件中

//子组件标签
<SlotTest :list="list"><form><h3>我是匿名插槽的数据</h3><input type="text" placeholder="请输入内容"></form>
</SlotTest>
<template><div class="slotChild"><h1>我是插槽组件</h1><slot></slot><!-- 匿名插槽 --></div>
</template>

具名插槽:

有名字的插槽,通常是将我们想要定义的html放置到对应的位置

 <SlotTest :list="list"><!-- 具名插槽 --><template #btn><button>添加</button><button>删除</button></template></SlotTest>
<template><div class="slotChild"><h1>我是插槽组件</h1><slot name="btn"></slot></div>
</template>

作用域插槽:

通常通过插槽传递列表以后,我们想要执行一些操作,但是无法获取到数据,通过作用域插槽可以获取子组件中的值,父组件可以获取值从而进行业务逻辑处理。

<SlotTest :list="list"><template #btn="childProps"><pre>{{ childProps }}</pre><button>添加</button><button @click="del(childProps.item.ind)">删除</button><!-- <button @click="del(childProps.item.id)">删除</button> --></template>
</SlotTest>
<template><div class="slotChild"><h1>我是插槽组件</h1><ul><li v-for="(i, ind) in list" :key="i.id">{{ i.name }}<!-- 具名插槽 --><!-- 作用域插槽(通过slot上传递属性) --><slot name="btn" :item="{ i, ind }"></slot></li></ul></div>
</template>

在render中如何获取插槽内容?

匿名插槽:vm.$slots.default

具名插槽:vm.$slots.name

作用域插槽:vm.$scopeSlots

相关文章:

vue插槽是什么?如何使用?

1、意义 插槽是vue提供的一个内置组件&#xff0c;是一个占位符。作用是可以向组件中传递一段html代码&#xff0c;加强了组件封装性以及复用性。 2、分类 插槽通常分为匿名插槽、具名插槽、作用域插槽 匿名插槽&#xff1a; 顾名思义就是没有名字的插槽&#xff0c;我们通…...

yum常用操作命令

目录 查询命令 查看当前所有仓库 检查可升级的程序 安装、卸载、升级 清除缓存命令 生成缓存 查询命令 列出已安装的软件包&#xff1a;yum list installed列出仓库中还未安装的软件包&#xff1a;yum list available列出指定软件包的依赖关系&#xff1a;yum deplist &…...

.Net C# 免费PDF合成软件

最近用到pdf合成&#xff0c;发现各种软件均收费啊&#xff0c;这个技术非常简单&#xff0c;别人写好的库一大把&#xff0c;这里用到了PDFsharp&#xff0c;项目地址Home of PDFsharp and MigraDoc Foundation 软件下载地址 https://download.csdn.net/download/g313105910…...

JAVA集合框架 一:Collection(LIst,Set)和Iterator(迭代器)

目录 一、Java 集合框架体系 1.Collection接口&#xff1a;用于存储一个一个的数据&#xff0c;也称单列数据集合&#xff08;single&#xff09;。 2.Map接口&#xff1a;用于存储具有映射关系“key-value对”的集合&#xff08;couple&#xff09; 3.Iterator接口&#…...

python ffmpeg合并ts文件

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;点击跳转 当你从网站下载了一集动漫&#xff0c;然后发现是一堆ts文件&#xff0c;虽然可以打开&#xff0c;但是某个都是10秒左右&#xff0c;…...

c++map和set剖析

文章参考文献&#xff1a;cplusplus 博主&#xff1a;拖拉机厂第一代码手 gitee:拖拉机厂第一代码手 c专栏&#xff1a;C 目录 &#x1f9d9;&#x1f3fc;‍♂set剖析&#x1f9da;&#x1f3fc;set简介&#x1f9da;&#x1f3fc;set模板参数列表&#x1f9da;&#x1f3fc;s…...

kubernetes configmap 的data中的文件内容格式错乱

截取一段错乱的配置&#xff1a; kubectl -n monitoring get cm blackbox-exporter-configuration -o yaml apiVersion: v1 data:config.yml: "\"modules\":\n \"http_2xx\":\n \"http\":\n \"preferred_ip_protocol\"…...

A TupleBackedMap cannot be modified Mybatis分页,使用List<Map>接参,无法修改map的解决方案

问题描述 当使用Mybatis 进行Page分页&#xff0c;再使用Page< map >作为接受参数。此时尝试修改map则会报错。 报错为 java.lang.UnsupportedOperationException: A TupleBackedMap cannot be modified解决方案 使用新的数组&#xff0c;使用反射&#xff0c;构建工具…...

Leetcode-每日一题【剑指 Offer 13. 机器人的运动范围】

题目 地上有一个m行n列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff08;不能移动到方格外&#xff09;&#xff0c;也不能进入行坐标和列坐标的数位之和大于k的格子。例…...

WEB集群——负载均衡集群

目录 一、 LVS-DR 群集。 1、LVS-DR工作原理 2、LVS-DR模式的特点 3、部署LVS-DR集群 3.1 配置负载调度器&#xff08;192.168.186.100&#xff09; 3.2 第一台web节点服务器&#xff08;192.168.186.103&#xff09; 3.3 第二台web节点服务器&#xff08;192.168.186.…...

ubuntu 20.0.4 搭建nvidia 显卡环境

一、安装docker 1、安装dokcer sudo apt install docker.io2、docker 添加到用户组 创建docker用户组 sudo groupadd docker添加当前用户加入docker用户组 sudo usermod -aG docker ${USER}重启docker服务 sudo systemctl restart docker切换或者退出当前账户再从新登入 …...

Windows环境下通过 系统定时 执行脚本方式 压缩并备份文件夹 到其他数据盘

环境配置 压缩时需要使用7-zip进行调用&#xff0c;因此根据自己电脑进行安装 官网&#xff1a;https://www.7-zip.org/ 脚本文件 新建记事本文件&#xff0c;重命名为git_back_up.bat echo off rem 设置utf-8可以正常显示中文 chcp 65001 > nulrem 获取当前日期和时间&…...

C++系列二:STL教程-常用算法

提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 常用算法 前言算法列举&#xff1a;算法例子 前言 还有一些我在尝试中迷惑不解的&#xff0c;有点玄幻。 算法列举&#xff1a; 排序算法&#xff1a; sort(first, last);…...

【css】渐变

渐变是设置一种颜色或者多种颜色之间的过度变化。 两种渐变类型&#xff1a; 线性渐变&#xff08;向下/向上/向左/向右/对角线&#xff09; 径向渐变&#xff08;由其中心定义&#xff09; 1、线性渐变 语法&#xff1a;background-image: linear-gradient(direction, co…...

idea打开多个项目需要开多个窗口(恢复询问弹窗)

【版权所有&#xff0c;文章允许转载&#xff0c;但须以链接方式注明源地址&#xff0c;否则追究法律责任】【创作不易&#xff0c;点个赞就是对我最大的支持】 前言 仅作为学习笔记&#xff0c;供大家参考 总结的不错的话&#xff0c;记得点赞收藏关注哦&#xff01; 使用…...

篇十三:策略模式:选择不同算法

篇十三&#xff1a;“策略模式&#xff1a;选择不同算法” 设计模式是软件开发中的重要知识&#xff0c;策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;用于在运行时根据不同的需求选择不同的算法或行为。本文将探讨策略模式的作用和实现…...

Centos7.6 安装mysql过程全记录

在centos 7.6上 离线安装mysql 的步骤&#xff0c;可参考下文&#xff1a; 一、查看当前MySQL的安装情况并卸载 1. 查看当前MySQL的安装情况 查找之前是否安装了MySQL rpm -qa|grep -i mysql 2.卸载mysql 如果已经安装mysql&#xff0c;则需要先停止MySQL&#xff0c;再删除…...

Java中的Guava是什么?

Java中的Guava是一个非常强大的Java库&#xff0c;它提供了很多实用的工具类和方法&#xff0c;可以帮助我们更高效地开发Java应用程序。从新手的角度来看&#xff0c;Guava可以让我们在Java编程中变得更加简单、快速和高效。 Guava的命名来源于“Google’s favorite Java lib…...

vue.js兄弟组件方法调用b组件调用a组件方法

vue.js 中兄弟组件方法调用 场景&#xff1a;父组件中同时引入两个子组件&#xff08;A和B&#xff09;&#xff0c;此时B组件点击按钮需要调用A组件里面的方法 方案1&#xff1a;vue的事件总线 方案2&#xff1a;自定义事件&#xff08;$emit&#xff09; 最终方案&#xff1a…...

【Kubernetes】二进制搭建

目录 二进制搭建 Kubernetes v1.20 操作系统初始化配置 关闭防火墙 关闭selinux 关闭swap 根据规划设置主机名 在master添加hosts 调整内核参数 时间同步 部署 etcd 集群 准备签发证书环境 准备cfssl证书生成工具 生成Etcd证书 上传 etcd-cert.sh 和 etcd.sh 到 …...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...