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

Vue自定义事件

news 2026/5/18 13:27:05

自定义事件

​ 通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 使用this.$emit(‘自定义事件名’， 参数) ， 操作过程如下：

1-在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法

2-修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！

3-修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><todo><todo-title slot="todo-title" :title="title"></todo-title><todo-items slot="todo-items" v-for="(item,index) in todoItems":items="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items></todo></div><!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>//solt:插槽Vue.component("tudo",{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: ['items','index'],//只能绑定当前组件的方法template:'<li>{{index}}-----{{items}} <button  @click="remove">删除</button></li>',methods: {remove: function (index) {//this.$emit自定义事件分发this.$emit('remove',index)}}});var vm = new Vue({el: "#app",data: {title: "书籍列表",todoItems:["Java","Python","C++"]},methods: {removeItems: function (index) {console.log("删除了"+this.todoItems[index]+"OK");this.todoItems.splice(index,1,"haha"); //一次删除一个元素}}})
</script>
</body>
</html>

对上一个代码进行修改，实现删除功能逻辑理解

相关文章：

Vue自定义事件

自定义事件 ​ 通以上代码不难发现&#xff0c;数据项在Vue的实例中&#xff0c; 但删除操作要在组件中完成&#xff0c; 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了&#xff0c; Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题…...

编程日记 2023/5/16 19:10:36

Java SE 基础 (6) 第一个Java程序

开发环境已经搭建完毕&#xff0c;可以开发我们第一个Java程序了。 Java程序开发三步骤&#xff1a;编写、编译、运行。 编写Java源程序 public class HelloWord {public static void main(String[] args) {System.out.println("HelloWord!");} } 第一个 HelloWo…...

编程日记 2023/5/18 6:49:42

P1004 [NOIP2000 提高组] 方格取数

题目描述 设有 &#xfffd;&#xfffd;NN 的方格图 (&#xfffd;≤9)(N≤9)&#xff0c;我们将其中的某些方格中填入正整数&#xff0c;而其他的方格中则放入数字 00。如下图所示&#xff08;见样例&#xff09;: 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 0 0 0 0…...

编程日记 2023/5/18 20:59:44

Leetcode.1024 视频拼接

题目链接 Leetcode.1024 视频拼接 Rating &#xff1a; 1746 题目描述 你将会获得一系列视频片段&#xff0c;这些片段来自于一项持续时长为 time秒的体育赛事。这些片段可能有所重叠&#xff0c;也可能长度不一。 使用数组 clips描述所有的视频片段&#xff0c;其中 clips[i…...

编程日记 2023/5/19 20:55:14

20个华为路由器常用的Python脚本，网工写自动化脚本时候可以参考！

你好&#xff0c;这里是网络技术联盟站。 昨天给大家介绍了10个华为交换机的Python脚本&#xff1a; 10个华为华为交换机常用的Python脚本&#xff0c;网络工程师收藏&#xff01; 大家反响不错&#xff0c;后期我会陆续出一下思科、H3C、锐捷等厂商的脚本&#xff0c;前期会…...

编程日记 2023/5/22 21:33:55

【kubernetes云原生】k8s资源管理命令与Namespace使用详解

目录 一、前言 二、k8s概述 三、k8s常用操作管理命令 3.1 kubectl 命令用法 3.2 常用控制台管理命令演示 3.2.1 获取全部节点信息 3.2.2 获取当前集群下全部pod 3.2.3 查看某个pod信息 3.2.4 获取当前集群下的所有namespace信息 3.2.5 查看当前集群下已创建的资源 3…...

编程日记 2023/5/20 14:33:20

String源码深度刨析

前言 我们将从源码角度深度分析特点&#xff0c;来提升对他们的了解以及设计。 String、StringBuilder、StringBuffer的常见面试题及四大区别可以参考&#xff1a;String、StringBuilder、StringBuffer的四大区别解析 String public final class Stringimplements java.io.Se…...

编程日记 2023/5/18 15:34:02

FreeRTOS - 消息队列

一.消息队列的概念及应用消息队列&#xff08;queue&#xff09;&#xff1a;可以在任务与任务间、中断和任务间传递消息&#xff0c;实现任务接收来自其他任务或中断的不固定的消息1.1任务需求1、使用消息队列检测串口输入2、通过串口发送字符串openled1&#xff0c;openled2&…...

编程日记 2023/5/18 15:35:24

怎样正确做 Web 应用的压力测试?

环境 首先环境是非常重要的&#xff0c;需要尽可能跟生产环境靠近。 比方说&#xff0c;使用同样的nginx版本&#xff0c;php的话需要启用fpm&#xff0c;zend-optimizer等等&#xff0c;参数配置也最好跟生产环境保持一致。 当然&#xff0c;php的版本更加需要保持一致&#x…...

编程日记 2023/5/19 5:01:15

php mysql大学生求职招聘资源信息网zkfdzkf67a8

1&#xff0e;系统登录&#xff1a;系统登录是用户访问系统的路口&#xff0c;设计了系统登录界面&#xff0c;包括用户名、密码和验证码&#xff0c;然后对登录进来的用户判断身份信息&#xff0c;判断是管理员用户还是普通用户。 2&#xff0e;系统用户管理&#xff1a;不管是…...

编程日记 2023/5/18 6:50:03

2023上海市“星光计划”职业院校技能大赛 网络安全竞赛试题任务书

2023上海市“星光计划”职业院校技能大赛 网络安全竞赛试题任务书 A模块基础设施设置/安全加固&#xff08;200分&#xff09; 一、项目和任务描述&#xff1a; 假定你是某企业的网络安全工程师&#xff0c;对于企业的服务器系统&#xff0c;根据任务要求确保各服务正常运行&…...

编程日记 2023/5/22 21:33:49

Spring事务源码：创建代理类

参考文章&#xff1a; 《Spring事务源码解析之tx:annotation-driven标签解析》 《Spring 源码解析—事务执行》 参考资料&#xff1a; 《Spring AOP源码&#xff1a;开启注解读取》 《Spring AOP源码2&#xff1a;查找增强器》 《Spring AOP源码3&#xff1a;实现代理》 …...

编程日记 2023/5/20 7:37:03

java14 使用增强的模式匹配切换表达式

野旷天低树&#xff0c;江清月近人。——唐代杜甫《月夜忆舍弟》 使用增强的模式匹配切换表达式(Switch Expressions with Enhanced Pattern Matching) Java 14中引入的“Switch Expressions with Enhanced Pattern Matching”这个功能。 这个功能可以让我们在使用switch cas…...

编程日记 2023/5/18 3:47:53

python【正则表达式】

正则表达式 1.正则的作用 正则表达式式一种可以让复杂的字符串变得简单的工具。 写正则表达式的时候就是用正则符号来描述字符串规则。 2.正则语法 需要导入模块 from re import fullmatch, findall, search2.1.第一类&#xff1a;匹配类符号 1&#xff09;普通字符—在…...

编程日记 2023/5/19 21:46:33

Ubuntu常见系统问题解决方式

Ubuntu常见系统问题解决方式Ubuntu每次开机后提示检测到系统程序出现问题的解决方法Ubuntu循环登陆问题问题描述原因解决方法文件夹打开缓慢Ubuntu启动后GUI界面卡住不动Ubuntu18.04使用过程中常遇到的问题Ubuntu每次开机后提示检测到系统程序出现问题的解决方法 首先&#xf…...

编程日记 2023/5/18 13:51:17

C/C++中的虚拟内存

文章目录一、虚拟内存二、C中的虚拟内存分配模型三、C中的虚拟内存分配模型四、堆区和栈区的区别一、虚拟内存 虚拟内存是一种实现在计算机软硬件之间的内存管理技术&#xff0c;它将程序使用到的内存地址&#xff08;虚拟地址&#xff09;映射到计算机内存中的物理地址&#…...

编程日记 2023/5/18 13:51:12

Qt C++与Python混合编程：补充错误

在提示中&#xff0c;需要引用Python.h&#xff0c;出现错误。 1、找不到Python.h 如果是pro工程&#xff0c;需要在里面配置&#xff1b; INCLUDEPATH /Users/xinnianwang/opt/anaconda3/include LIBS /Users/xinnianwang/opt/anaconda3/lib 如果是CMakeLists.txt需要配…...

编程日记 2023/5/18 2:11:45

2023-04-01：当Go语言遇见FFmpeg视频解码器，使用Go语言改写decode_video.c文件，提升视频解码效率与开发体验。

2023-04-01&#xff1a;当Go语言遇见FFmpeg视频解码器&#xff0c;使用Go语言改写decode_video.c文件&#xff0c;提升视频解码效率与开发体验。 答案2023-04-01&#xff1a; 步骤如下&#xff1a; 1.导入必要的依赖库&#xff0c;包括 fmt、os、unsafe 和其它 FFmpeg 库相关…...

编程日记 2023/5/17 21:08:34

Solidity 学习笔记

主要参考网上资料学习&#xff0c;个人学习笔记有删改&#xff0c;参考出处在文末列出。 0 基础 IDE: remixType Bool: bool public _bool true; 默认false;整型&#xff1a;int、uint、uint256&#xff0c;默认0;地址类型&#xff1a;address&#xff0c;分为 payable 和普…...

编程日记 2023/5/19 3:24:50

ThreadLocal原理

关键点总结&#xff1a; ThreadLocal更像是对其他类型变量的一层包装&#xff0c;通过ThreadLocal的包装使得该变量可以在线程之间隔离和当前线程全局共享。在Thread中有一个threadLocals变量&#xff0c;类型为ThreadLocal.ThreadLocalMap&#xff0c;ThreadLocalMap中key是Th…...

编程日记 2023/5/18 1:24:12

逆向实战：用X32dbg条件断点精准定位MFC程序的窗口消息处理函数

逆向实战&#xff1a;用X32dbg条件断点精准定位MFC程序的窗口消息处理函数 在逆向分析领域&#xff0c;MFC程序因其复杂的消息映射机制和封装层次&#xff0c;常常让分析者感到无从下手。特别是当我们需要分析某个特定窗口消息&#xff08;如按钮点击、菜单选择&#xff09;的处…...

编程新知 2026/5/18 13:07:44

修音翻车现场实录：用Melodyne选择工具时，这3个坑我劝你别踩

Melodyne修音避坑指南&#xff1a;选择工具三大致命操作误区解析 第一次用Melodyne修人声时&#xff0c;我对着屏幕上的波形信心满满地拖动音符&#xff0c;结果导出的音频听起来像电子合成器故障——音高扭曲、节奏支离破碎。后来才发现&#xff0c;问题都出在那个看似简单的…...

编程新知 2026/5/18 12:32:48

手把手教你学Simulink——基于 PWM 加相移混合控制的双向 DC-DC 变换器仿真

目录 手把手教你学Simulink——基于 PWM 加相移混合控制的双向 DC-DC 变换器仿真 摘要 Abstract 1. 引言 1.1 研究背景 1.2 本文目标 2. 混合控制机理 2.1 拓扑选择&#xff1a;双有源桥&#xff08;DAB&#xff09; 2.2 混合控制自由度 3. Simulink 主电路建模 3.1…...

编程新知 2026/5/18 12:12:24

SFT别急着接RL！你的多模态大模型可能一直在“带伤训练”

PRISM团队 投稿量子位 | 公众号 QbitAISFT之后&#xff0c;直接上强化学习就够了吗&#xff1f;小心&#xff0c;你做的可能不是“训练”&#xff0c;而是“还债”。在多模态大模型&#xff08;MLLM&#xff09;的后训练中&#xff0c;行业内长期遵循着一个看似天经地义的范式&…...

编程新知 2026/5/18 11:26:28

AWS实战|从零搭建高可用Web应用网络架构

1. 为什么需要高可用Web应用架构&#xff1f; 最近帮朋友公司迁移电商平台到AWS时&#xff0c;他们最担心的就是大促期间服务器挂掉。这让我想起三年前自己踩过的坑——当时用单可用区部署的官网&#xff0c;因为一次区域级故障直接宕机8小时。现在回头看&#xff0c;其实只要在…...

编程新知 2026/5/18 11:17:52

Python try...except ImportError 语句详解

在Python编程中&#xff0c;ImportError 是与模块导入相关的核心异常。优雅地处理它&#xff0c;是编写健壮、可维护和跨平台代码的关键。try...except ImportError 结构正是实现这一目标的标准工具。本文将为你抽丝剥茧&#xff0c;从基础概念到高级实践&#xff0c;全面解析这…...

编程新知 2026/5/17 11:01:43

基于Adafruit FLORA的红外遥控胸针DIY：从嵌入式编程到可穿戴艺术

1. 项目概述&#xff1a;一个藏在时尚配饰里的“电视终结者”几年前&#xff0c;我在一个朋友聚会上&#xff0c;发现大家明明在聊天&#xff0c;眼睛却总是不自觉地瞟向角落里那个正在播放无聊广告的电视。直接走过去关掉显得有点突兀&#xff0c;找遥控器又太麻烦。那一刻我就…...

编程新知 2026/5/18 12:13:56

Excel MCP Server终极指南：让AI成为你的Excel自动化助手

Excel MCP Server终极指南&#xff1a;让AI成为你的Excel自动化助手 【免费下载链接】excel-mcp-server A Model Context Protocol server for Excel file manipulation 项目地址: https://gitcode.com/gh_mirrors/ex/excel-mcp-server 你是否厌倦了重复的Excel操作&…...

编程新知 2026/5/18 12:55:01

Go语言实现跨平台系统更新检查器：自动化运维与安全监控实践

1. 项目概述&#xff1a;一个被低估的系统运维“哨兵”在服务器和桌面系统的日常运维中&#xff0c;有一个场景大家一定不陌生&#xff1a;某天&#xff0c;你管理的服务器突然因为一个已知漏洞被攻击&#xff0c;事后排查发现&#xff0c;相关的安全补丁其实在几周前就已经发布…...

编程新知 2026/5/17 7:51:55

基于BLE HID与旋转编码器打造双模式无线遥控器

1. 项目概述你有没有过这样的时刻&#xff1a;窝在沙发里看剧&#xff0c;想调个音量或者暂停一下&#xff0c;却不得不伸手去够茶几上的键盘或鼠标&#xff0c;打断那份沉浸的惬意&#xff1f;或者&#xff0c;在电脑上回味一些经典老游戏时&#xff0c;觉得用键盘移动、鼠标射…...

编程新知 2026/5/17 5:37:42