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

Vue 插槽 组件插入不固定内容

定义好一个组件,如果想插入图片或视频这非常不好的控制应该显示什么,这个时候可以使用插槽插入自定义内容

默认插槽

  <Login><template><h1>我是插入的内容</h1></template></Login >

组件

  <slot></slot><!--插入内容的占位符-->
<button @click="login">登录</button>

具名插槽

带名字的插槽,上面写法适合插入一个内容的写法,这种写法可以插入多个内容

适合插入多个内容

<slot name="top"></slot><!--插入内容的占位符-->
<button @click="login">登录</button><slot name="foot"></slot>

< template v-slot:foot > 另一种写法

 <Login><template><h1 slot="top">我是上面的内容</h1><h1>我没有写SLOT不会显示,有两个插槽Vue不知道该放哪个合适</h1><h1 slot="top">我会追加</h1><h1 slot="foot">我是底部</h1></template></Login>

在这里插入图片描述


作用域插槽

作用域插槽可以从子组件返回数据给插槽使用者

子组件

   <slot :list="userList"></slot><!-- 把用户列表传给插槽使用者  :后端名字可以自定义  等号后为传的数据 -->
 data() {return {userList: [{id:101,name:'dpc'}, {id:102,name:'cyy'}]}    }

插槽所有者

 <User><template slot-scope="getList"><!--getList可以不用和子组件一样-->{{getList}}</template></User>

可以通过getList.id拿值
在这里插入图片描述

相关文章:

Vue 插槽 组件插入不固定内容

定义好一个组件&#xff0c;如果想插入图片或视频这非常不好的控制应该显示什么&#xff0c;这个时候可以使用插槽插入自定义内容 默认插槽 <Login><template><h1>我是插入的内容</h1></template></Login >组件 <slot></slot>…...

webpack打包时配置环境变量

webpack打包时配置环境变量 一、常规环境变量配置1. 使用webpack.DefinePlugin定义全局常量2. 在Vue静态页面中使用该环境变量 二、纯静态文件配置环境变量1. 使用npm或yarn安装html-webpack-plugin2. 在Webpack配置中引入并使用插件3. 使用htmlwebpackplugin.options方式配置环…...

【c++|opencv】一、基础操作---3.访问图像元素

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 访问图像元素 1. 访问图像像素 1.1 访问某像素 //灰度图像&#xff1a; image.at<uchar>(j, i) //j为行数&#xff0c;i为列数 //BGR彩色图像 i…...

机器视觉3D项目评估的基本要素及测量案例分析

目录 一. 检测需求确认 1、产品名称&#xff1a;【了解是什么产品上的零件&#xff0c;功能是什么】 2、*产品尺寸&#xff1a;【最大兼容尺寸】 3、*测量项目&#xff1a;【确认清楚测量点位】 4、*精度要求&#xff1a;【若客户提出的精度值过大或者过小&#xff0c;可以和客…...

力扣日记10.31-【栈与队列篇】前 K 个高频元素

力扣日记&#xff1a;【栈与队列篇】前 K 个高频元素 日期&#xff1a;2023.10.31 参考&#xff1a;代码随想录、力扣 347. 前 K 个高频元素 题目描述 难度&#xff1a;中等 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意…...

TensorFlow案例学习:简单的音频识别

前言 以下内容均来源于官方教程&#xff1a;简单的音频识别&#xff1a;识别关键字 音频识别 下载数据集 下载地址&#xff1a;http://storage.googleapis.com/download.tensorflow.org/data/mini_speech_commands.zip 可以直接浏览器访问下载。 下载完成后将其解压到项目…...

css小程序踩坑记录

写标签设置距离 一直设置不动 写个双层 设置动了 神奇 好玩...

Android sqlite分页上传离线订单后删除

1、判断订单表的的总数是否大于0&#xff0c;如果大于0开始上传订单 public int getOrderCount() {String query "SELECT COUNT(*) FROM " TABLE_NAME;Cursor cursor db.rawQuery(query, null);int count 0;if (cursor.moveToFirst()) {count cursor.getInt(0);…...

Flask基本教程以及Jinjia2模板引擎简介

flask基本使用 直接看代码吧&#xff0c;非常容易上手&#xff1a; # 创建flask应用 app Flask(__name__)# 路由 app.route("/index", methods[GET]) def index():return "FLASK&#xff1a;欢迎访问主页&#xff01;"if __name__ "__main__"…...

Django实战项目-学习任务系统-兑换物品管理

接着上期代码框架&#xff0c;开发第5个功能&#xff0c;兑换物品管理&#xff0c;再增加一个学习兑换物品表&#xff0c;主要用来维护兑换物品&#xff0c;所需积分&#xff0c;物品状态等信息&#xff0c;还有一个积分流水表&#xff0c;完成任务奖励积分&#xff0c;兑换物品…...

jmeter和postman你选哪个做接口测试?

软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中&#xff0c;有高手&#xff0c;自然也会有小白&#xff0c;但有一点我们无法否认&#xff0c;就是每一个高手都是从小白开始的&#xff0c;所以今天我们就来谈谈一大部分人在做的接口测试&#xff0c;小白变高手…...

mac版本 Adobe总是弹窗提示验证问题如何解决

来自&#xff1a; mac软件下载macsc站 mac电脑使用过程中总是弹出Adobe 的弹窗提示&#xff0c;尤其是打开Adobe的软件&#xff0c;更是频繁的弹出提示&#xff1a; Your Adobe app is not genuine. Adobe reserves the right to disable this software after a 0 grace period…...

钡铼技术ARM工控机在机器人控制领域的应用

ARM工控机是一种基于ARM架构的工业控制计算机&#xff0c;用于在工业自动化领域中进行数据采集、监控、控制和通信等应用。ARM&#xff08;Advanced RISC Machine&#xff09;架构是一种低功耗、高性能的处理器架构&#xff0c;广泛应用于移动设备、嵌入式系统和物联网等领域。…...

HTML+CSS+JS实现计算器

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…...

Git工作原理和常见问题处理方案

博客定位Git工作区域工作区域划分暂存区设计目的 Git基本操作核心操作初始化和配置指令 HEAD指针Git版本回滚指令介绍reset模式reset hard使用场景reset soft使用场景reset mixed使用场景reset使用注意事项checkout使用场景 Git分支管理什么是分支分支应用场景分支相关指令被合…...

C++-实现一个简单的菜单程序

C-实现一个简单的菜单程序 1&#xff0c;if-else语句实现1.1&#xff0c;代码实现1.2&#xff0c;功能检测 2&#xff0c;switch语句实现2.1&#xff0c;代码实现2.2&#xff0c;功能检测 1&#xff0c;if-else语句实现 实现一个简单的菜单程序&#xff0c;运行时显示"Men…...

Git更新 fork 的仓库

文章目录 确保本地仓库是最新的配置上游存储库(remote upstream)获取上游存储库的更改合并上游存储库的更改推送更改到你 fork 的仓库 确保本地仓库是最新的 在命令行中&#xff0c;导航到存储库的本地副本所在的目录&#xff0c;并执行以下命令&#xff1a; # 切换到主分支 …...

chorme安装esay scholar及chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案

问题描述 如题&#xff0c;博主想安装easy scholar用于查询论文的分区&#xff0c;结果安装了半天一直出现chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案的问题。 解决方案 先从这个网址下载&#xff1a;https://www.easyscholar.cc/download 然后对下载好的文…...

数据库-扩展语句,约束方式

扩展语句&#xff1a; 例&#xff1a; 自增长&#xff1a; auto_increment:表示该字段可以自增长&#xff0c;默认从一开始&#xff0c;每条记录会自动递增1 复制&#xff1a; 通过like这个语法直接复制ky32的表结构&#xff0c;只能复制表结构&#xff0c;不能复制表里面的…...

精密数据工匠:探索 Netty ChannelHandler 的奥秘

通过上篇文章&#xff08;Netty入门 — Channel&#xff0c;把握 Netty 通信的命门&#xff09;&#xff0c;我们知道 Channel 是传输数据的通道&#xff0c;但是有了数据&#xff0c;也有数据通道&#xff0c;没有数据加工也是没有意义的&#xff0c;所以今天学习 Netty 的第四…...

YOLOE零样本迁移实战案例:从LVIS预训练模型快速适配安防监控场景

YOLOE零样本迁移实战案例&#xff1a;从LVIS预训练模型快速适配安防监控场景 1. 引言&#xff1a;当通用模型遇见专业场景 想象一下&#xff0c;你手里有一个能识别上千种物体的“全能”AI模型&#xff0c;现在需要它去盯监控&#xff0c;专门找“可疑人员”、“遗留包裹”和…...

避坑指南:解决Livox Mid-360双雷达点云融合时坐标系错乱与IMU数据混杂问题

Livox Mid-360双雷达点云融合实战&#xff1a;坐标系校准与IMU数据分离全解析 当你在RViz中看到两个Livox Mid-360雷达的点云像醉酒的水母一样随机飘动&#xff0c;而IMU数据又像被搅拌机混合过的果汁——恭喜你&#xff0c;遇到了多传感器融合的经典难题。这不是简单的参数调整…...

从订餐流程到并发编程:Petri网中的‘库所’与‘变迁’到底在模拟什么?

从订餐流程到并发编程&#xff1a;Petri网中的‘库所’与‘变迁’到底在模拟什么&#xff1f; 想象一下&#xff0c;你正在用手机订外卖&#xff1a;选择菜品、下单支付、等待制作、骑手配送——这个看似简单的流程背后&#xff0c;隐藏着一个精妙的系统状态转换模型。这正是Pe…...

Qwen2.5-VL-3B视频识别实战:从环境搭建到显存优化的踩坑记录

Qwen2.5-VL-3B视频识别实战&#xff1a;从环境搭建到显存优化的全流程指南 当开发者第一次尝试用Qwen2.5-VL-3B处理视频内容时&#xff0c;往往会遇到各种预料之外的挑战。从依赖包缺失到显存爆炸&#xff0c;从环境配置到参数调试&#xff0c;每一步都可能成为阻碍项目推进的绊…...

MGeo中文地址结构化教程:从原始文本到标准GeoJSON格式输出的完整转换流程

MGeo中文地址结构化教程&#xff1a;从原始文本到标准GeoJSON格式输出的完整转换流程 1. 引言&#xff1a;为什么我们需要地址结构化&#xff1f; 你有没有遇到过这样的场景&#xff1f;用户填写的收货地址五花八门&#xff1a;“北京市海淀区中关村大街27号”、“北京海淀中…...

ESLyric歌词源一站式配置:Foobar2000多平台格式转换高效解决方案

ESLyric歌词源一站式配置&#xff1a;Foobar2000多平台格式转换高效解决方案 【免费下载链接】ESLyric-LyricsSource Advanced lyrics source for ESLyric in foobar2000 项目地址: https://gitcode.com/gh_mirrors/es/ESLyric-LyricsSource ESLyric歌词源是Foobar2000播…...

如何用Python零依赖快速获取百度搜索结果?python-baidusearch深度解析

如何用Python零依赖快速获取百度搜索结果&#xff1f;python-baidusearch深度解析 【免费下载链接】python-baidusearch 自己手写的百度搜索接口的封装&#xff0c;pip安装&#xff0c;支持命令行执行。Baidu Search unofficial API for Python with no external dependencies …...

ollama-QwQ-32B微调实战:定制OpenClaw专属指令集

ollama-QwQ-32B微调实战&#xff1a;定制OpenClaw专属指令集 1. 为什么需要定制OpenClaw指令集 去年冬天&#xff0c;当我第一次用OpenClaw自动整理桌面文件时&#xff0c;发现它总是把"截图"和"截屏"两个文件夹混在一起。这让我意识到&#xff1a;通用大…...

MoveIt Config 配置文件完整一致性检查

检查范围&#xff08;全部核对完毕&#xff09;ros2_control xacro&#xff08;硬件接口 / 关节&#xff09;initial_positions.yaml&#xff08;初始位置&#xff09;srdf&#xff08;运动组 / 关节&#xff09;joint_limits.yaml&#xff08;关节限制&#xff09;kinematics.…...

2026年必看:专业婚恋软件推荐,找到真爱不迷路

在当今快节奏的社会中&#xff0c;越来越多的高知青年面临着交友难、脱单难的问题。传统的社交方式往往难以满足他们对高质量伴侣的需求&#xff0c;而专业的婚恋软件则成为他们寻找真爱的重要途径。本文将重点推荐一款备受好评的婚恋软件——即恋App&#xff0c;并结合具体数据…...