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

Vue:插槽，与自定义事件

news 2025/11/5 4:36:02

1.插槽slot

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--    <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>Java</li>-->
<!--        <li>Linux</li>-->
<!--        <li>Python</li>-->
<!--    </ul>--><todo>//todo里面的内容会替代todo里的slot部分，div里面的slot属性代表插到具体name的slot，起名有点让小白蒙蔽，这同样是为什么一开始显示两遍的原理,希望帮到各位。<todo-title slot="todo-title" :title="title"></todo-title><todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items></todo></div><!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>//slot: 插槽Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'});Vue.component('todo-title',{props:['title'],template: '<div>{{title}}</div>'});Vue.component('todo-items',{props:['item'],template: '<li>{{item}}</li>'});var vm = new Vue({el:"#app",data:{title:'秦老师列表',todoItems: ['狂神说Java','狂神说前端','狂神说Linux']}});</script></body>
</html>

 2.自定义事件

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--    <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>Java</li>-->
<!--        <li>Linux</li>-->
<!--        <li>Python</li>-->
<!--    </ul>--><todo>//todo里面的内容会替代todo里的slot部分，div里面的slot属性代表插到具体name的slot，起名有点让小白蒙蔽，这同样是为什么一开始显示两遍的原理,希望帮到各位。<todo-title slot="todo-title" :title="title"></todo-title><todo-items slot="todo-items" v-for="(item,index) in todoItems"  v-bind:index="index"   :item="item"   v-on:remove="removeItems(index)"></todo-items></todo></div><!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>//slot: 插槽Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'});Vue.component('todo-title',{props:['title'],template: '<div>{{title}}</div>'});Vue.component('todo-items',{props:['item','index'],template: '<li>{{index}}-------{{item}}<button @click="remove">删除</button></li>',methods: {remove: function (index) {this.$emit('remove',index)}}});var vm = new Vue({el:"#app",data:{title:'秦老师列表',todoItems: ['狂神说Java','狂神说前端','狂神说Linux']},methods: {removeItems:function (index){console.log("删除了"+index+'号元素,元素名为'+this.todoItems[index])this.todoItems.splice(index,1);}}});</script></body>
</html>

 

 

 

 

 

相关文章：

Vue:插槽，与自定义事件

1.插槽slot <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <div id"app"><!-- <p>列表书籍</p>--> <!-- …...

编程日记 2023/9/1 7:49:11

Window11-Ubuntu双系统安装

一、制作Ubuntu系统盘 1.下载Ubuntu镜像源 阿里云开源镜像站&#xff1a;https://mirrors.aliyun.com/ubuntu-releases/ 清华大学开源软件镜像网站&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 选择想要的版本下载&#xff0c;我用的是20.04版本。 2…...

编程日记 2023/9/1 7:48:10

【React】React学习：从初级到高级（一）

React学习[一] 1 UI描述1.1 组件的创建与使用1.1.1 创建组件1.1.2 使用组件 1.2 组件的导入与导出1.2.1 根组件文件1.2.2 导出和导入一个组件1.2.3 从同一文件中导出和导入多个组件 1.3 使用JSX书写标签语言1.3.1 JSX:将标签引入JavaScript1.3.2 将HTML转换为JSX1.3.3 高级提示…...

编程日记 2023/9/1 7:47:08

Flutter 安装教程 + 运行教程

1.下载依赖 https://flutter.cn/docs/get-started/install/windows 解压完后根据自己的位置放置&#xff0c;如&#xff08;D:\flutter&#xff09; 注意 请勿将 Flutter 有特殊字符或空格的路径下。 请勿将 Flutter 安装在需要高权限的文件夹内&#xff0c;例如 C:\Program …...

编程日记 2023/9/1 7:46:07

正中优配：A股早盘三大股指微涨 华为概念表现活跃

周三&#xff08;8月30日&#xff09;&#xff0c;到上午收盘&#xff0c;三大股指团体收涨。其间上证指数涨0.06%&#xff0c;报3137.72点&#xff1b;深证成指和创业板指别离涨0.33%、0.12%&#xff1b;沪深两市合计成交额6423.91亿元&#xff0c;总体来看&#xff0c;两市个…...

编程日记 2023/9/1 7:45:06

SAP MM学习笔记26- SAP中 振替转记（转移过账）和 在库转送（库存转储）4- Plant间在库转送 之 在库转送Order(有出荷）

SAP 中在库移动 不仅有入库&#xff08;GR&#xff09;&#xff0c;出库&#xff08;GI&#xff09;&#xff0c;也可以是单纯内部的转记或转送。 1&#xff0c;振替转记&#xff08;转移过账&#xff09; 2&#xff0c;在库转送&#xff08;库存转储&#xff09; 1&#xff…...

编程日记 2023/9/1 7:44:05

suricata规则字段解析

一、Payload关键字 1、content 可以匹配所有字符&#xff1b;从a到z&#xff0c;大写和小写及所有特殊标志。针对一些特殊符号或中文等&#xff0c;需要使用十六进制进行匹配&#xff0c;写法&#xff1a;|3A|表示冒号&#xff0c;以此类推。|0D| -> \r&#xff0c;|0A| -…...

编程日记 2023/9/1 7:43:04

韶音骨传导耳机好不好，韶音骨传导耳机值得入手吗

韶音耳机的质量还是很不错的&#xff0c;其实力相比于百元价位的耳机而言领先了不少&#xff0c;具备多种功能&#xff0c;佩戴起来也是有着舒适性。它自主研发了骨传导音频技术&#xff0c;不过在今年开始&#xff0c;似乎已经将方向开始往运动偏移。 而在韶音的骨传导耳机中&…...

编程日记 2023/9/1 7:42:02

【LeetCode】208.实现Trie（前缀树）

题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动补完和拼写检查。 请你实现 Trie 类&#xff1a; Trie() 初始化前缀…...

编程日记 2023/9/1 7:41:00

多线程笔记: volatile、synchronized、Monitor等

为什么非volatile变量也有线程可见性&#xff1f;不加volatile也可以看到变量变化是为什么&#xff1f;Thread.sleep() 和 System.out.println() 与内存可见性的影响Thread.sleep() 对线程可见性的影响&#xff1f;Java中的Monitor监视器是什么&#xff1f; Slf4j public clas…...

编程日记 2023/9/1 7:39:59

shell语法--数组相关

shell定义一个数组 在 shell 中&#xff0c;可以使用以下语法来定义一个数组&#xff1a; array_name(item1 item2 item3 ...) 其中&#xff0c;array_name 是数组的名称&#xff0c;item1、item2、item3 等是数组中的元素&#xff0c;它们之间用空格分隔。例如&#xff0c;以下…...

编程日记 2023/9/1 7:38:58

AI:05 - 基于深度学习的道路交通信号灯的检测与识别

随着人工智能的快速发展，基于深度学习的视觉算法在道路交通领域中起到了重要作用。本文将探讨如何利用深度学习技术实现道路交通信号灯的检测与识别，通过多处代码实例展示技术深度。 道路交通信号灯是指示交通参与者行驶和停止的重要信号。准确地检测和识别交通信号灯对于智…...

编程日记 2023/9/1 7:37:56

The Sandbox 即将参加韩国区块链周，并带来一系列独家周边活动！

韩国区块链周&#xff08;Korea Blockchain Week&#xff09;即将到来&#xff0c;届时将有成千上万的 NFT 项目、建设者、社区成员、企业家、投资者和爱好者齐聚首尔&#xff0c;分享 Web3 的最新更新和未来愿景。 继成功举办韩流崛起 LAND 销售并宣布多个合作伙伴关系之后&a…...

编程日记 2023/9/1 7:36:54

Mysql高阶语句 （一）

一、常用查询 &#xff08;增、删、改、查&#xff09; 对 MySQL 数据库的查询&#xff0c;除了基本的查询外&#xff0c;有时候需要对查询的结果集进行处理。 例如只取 10 条数据、对查询结果进行排序或分组等等 1、按关键字排序 PS:类比于windows 任务管理器 使用 SELECT 语句…...

编程日记 2023/9/1 7:35:53

win10 ping不通 Docker ip(解决截图)

背景&#xff1a; win10下载了docker desktop就是这个图&#xff0c;然后计划做一个springboot连接docker。 docker部署springboot :docker 部署springboot(成功、截图)_總鑽風的博客-CSDN博客 问题&#xff1a;spring boot部署docker后&#xff0c;docker接口通了&#xff0…...

编程日记 2023/9/1 7:34:51

讲讲几道关于 TCP/UDP 通信的面试题

TCP &#xff08;1&#xff09;TCP 的 accept 发生在三次握手的哪个阶段&#xff1f; 如下图connect和accept的关系&#xff1a; accept过程发生在三次握手之后&#xff0c;三次握手完成后&#xff0c;客户端和服务器就建立了tcp连接并可以进行数据交互了。这时可以调用accep…...

编程日记 2023/9/1 7:33:50

golang 连接 oracle 数据库 增删改查

1&#xff0c;golang 连接 oracle 数据库 2&#xff0c;增删改查 /** Author: lmy* Date: 2023-08-24 15:19:22* LastEditors: lmy* LastEditTime: 2023-08-24 16:23:58* FilePath: \golangOracleDemo\main.go* Description: golang oracle 增删改查 DEMO*/package mainimpor…...

编程日记 2023/9/1 7:32:49

Unity——音频管理器（附例子）

在实际游戏开发中&#xff0c;音效既是一个相对独立的部分&#xff0c;又与其他游戏逻辑密切关联。也就是说&#xff0c;与音效相关的代码会插入很多细节代码中。 而且在音效非常丰富的情况下&#xff0c;如果每一个游戏模块都单独播放音效&#xff0c;那么可能会带来一些问题…...

编程日记 2023/9/1 7:31:48

TCP协议基础

一&#xff1a; TCP协议是什么&#xff1f; TCP协议是基于面向连接&#xff0c;可靠传输&#xff0c;基于字节流的传输层通信协议 1. 面向连接 TCP协议是一种面向连接的协议&#xff0c;意味着在双方在建立数据传输之前&#xff0c;需要进行一个逻辑上的连接&#xff0c;且是…...

编程日记 2023/9/1 7:30:46

C# NetTopologySuite+ProjNet 任意图形类型坐标转换

添加引用&#xff1a;NetTopologySuite、ProjNet、ProjNet.SRID Program.cs文件&#xff1a; using ProjNet.CoordinateSystems; using ProjNet.CoordinateSystems.Transformations; using ProjNet.SRID; using System; using System.Collections.Generic; using System.Linq;…...

编程日记 2023/9/1 7:29:45

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/11/1 22:49:39

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/11/2 17:07:38

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/10/31 20:51:54

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/11/3 13:24:40

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/11/1 2:20:06

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/11/3 2:08:32

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/9/16 2:04:37

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51

Python学习(8) ----- Python的类与对象

Python 中的类&#xff08;Class&#xff09;与对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心。我们可以通过“类是模板&#xff0c;对象是实例”来理解它们的关系。 &#x1f9f1; 一句话理解&#xff1a; 类就像“图纸”&#xff0c;对…...

编程新知 2025/10/23 12:11:37