Vue自定义事件
自定义事件
通以上代码不难发现，数据项在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自定义事件
自定义事件 通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题…...
Java SE 基础 (6) 第一个Java程序
开发环境已经搭建完毕，可以开发我们第一个Java程序了。 Java程序开发三步骤：编写、编译、运行。 编写Java源程序 public class HelloWord {public static void main(String[] args) {System.out.println("HelloWord!");} } 第一个 HelloWo…...
P1004 [NOIP2000 提高组] 方格取数
题目描述 设有 ��NN 的方格图 (�≤9)(N≤9)，我们将其中的某些方格中填入正整数，而其他的方格中则放入数字 00。如下图所示（见样例）: 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 0 0 0 0…...
Leetcode.1024 视频拼接
题目链接 Leetcode.1024 视频拼接 Rating ： 1746 题目描述 你将会获得一系列视频片段，这些片段来自于一项持续时长为 time秒的体育赛事。这些片段可能有所重叠，也可能长度不一。 使用数组 clips描述所有的视频片段，其中 clips[i…...
20个华为路由器常用的Python脚本，网工写自动化脚本时候可以参考！
你好，这里是网络技术联盟站。 昨天给大家介绍了10个华为交换机的Python脚本： 10个华为华为交换机常用的Python脚本，网络工程师收藏！ 大家反响不错，后期我会陆续出一下思科、H3C、锐捷等厂商的脚本，前期会…...
【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…...
String源码深度刨析
前言 我们将从源码角度深度分析特点，来提升对他们的了解以及设计。 String、StringBuilder、StringBuffer的常见面试题及四大区别可以参考：String、StringBuilder、StringBuffer的四大区别解析 String public final class Stringimplements java.io.Se…...
FreeRTOS - 消息队列
一.消息队列的概念及应用消息队列（queue）：可以在任务与任务间、中断和任务间传递消息，实现任务接收来自其他任务或中断的不固定的消息1.1任务需求1、使用消息队列检测串口输入2、通过串口发送字符串openled1，openled2&…...
怎样正确做 Web 应用的压力测试?
环境 首先环境是非常重要的，需要尽可能跟生产环境靠近。 比方说，使用同样的nginx版本，php的话需要启用fpm，zend-optimizer等等，参数配置也最好跟生产环境保持一致。 当然，php的版本更加需要保持一致&#x…...
php mysql大学生求职招聘资源信息网zkfdzkf67a8
1．系统登录：系统登录是用户访问系统的路口，设计了系统登录界面，包括用户名、密码和验证码，然后对登录进来的用户判断身份信息，判断是管理员用户还是普通用户。 2．系统用户管理：不管是…...
2023上海市“星光计划”职业院校技能大赛 网络安全竞赛试题任务书
2023上海市“星光计划”职业院校技能大赛 网络安全竞赛试题任务书 A模块基础设施设置/安全加固（200分） 一、项目和任务描述： 假定你是某企业的网络安全工程师，对于企业的服务器系统，根据任务要求确保各服务正常运行&…...
Spring事务源码：创建代理类
参考文章： 《Spring事务源码解析之tx:annotation-driven标签解析》 《Spring 源码解析—事务执行》 参考资料： 《Spring AOP源码：开启注解读取》 《Spring AOP源码2：查找增强器》 《Spring AOP源码3：实现代理》 …...
java14 使用增强的模式匹配切换表达式
野旷天低树，江清月近人。——唐代杜甫《月夜忆舍弟》 使用增强的模式匹配切换表达式(Switch Expressions with Enhanced Pattern Matching) Java 14中引入的“Switch Expressions with Enhanced Pattern Matching”这个功能。 这个功能可以让我们在使用switch cas…...
python【正则表达式】
正则表达式 1.正则的作用 正则表达式式一种可以让复杂的字符串变得简单的工具。 写正则表达式的时候就是用正则符号来描述字符串规则。 2.正则语法 需要导入模块 from re import fullmatch, findall, search2.1.第一类：匹配类符号 1）普通字符—在…...
Ubuntu常见系统问题解决方式
Ubuntu常见系统问题解决方式Ubuntu每次开机后提示检测到系统程序出现问题的解决方法Ubuntu循环登陆问题问题描述原因解决方法文件夹打开缓慢Ubuntu启动后GUI界面卡住不动Ubuntu18.04使用过程中常遇到的问题Ubuntu每次开机后提示检测到系统程序出现问题的解决方法 首先…...
C/C++中的虚拟内存
文章目录一、虚拟内存二、C中的虚拟内存分配模型三、C中的虚拟内存分配模型四、堆区和栈区的区别一、虚拟内存 虚拟内存是一种实现在计算机软硬件之间的内存管理技术，它将程序使用到的内存地址（虚拟地址）映射到计算机内存中的物理地址&#…...
Qt C++与Python混合编程：补充错误
在提示中，需要引用Python.h，出现错误。 1、找不到Python.h 如果是pro工程，需要在里面配置； INCLUDEPATH /Users/xinnianwang/opt/anaconda3/include LIBS /Users/xinnianwang/opt/anaconda3/lib 如果是CMakeLists.txt需要配…...
2023-04-01：当Go语言遇见FFmpeg视频解码器，使用Go语言改写decode_video.c文件，提升视频解码效率与开发体验。
2023-04-01：当Go语言遇见FFmpeg视频解码器，使用Go语言改写decode_video.c文件，提升视频解码效率与开发体验。 答案2023-04-01： 步骤如下： 1.导入必要的依赖库，包括 fmt、os、unsafe 和其它 FFmpeg 库相关…...
Solidity 学习笔记
主要参考网上资料学习，个人学习笔记有删改，参考出处在文末列出。 0 基础 IDE: remixType Bool: bool public _bool true; 默认false;整型：int、uint、uint256，默认0;地址类型：address，分为 payable 和普…...
ThreadLocal原理
关键点总结： ThreadLocal更像是对其他类型变量的一层包装，通过ThreadLocal的包装使得该变量可以在线程之间隔离和当前线程全局共享。在Thread中有一个threadLocals变量，类型为ThreadLocal.ThreadLocalMap，ThreadLocalMap中key是Th…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
宇树科技，改名了！
提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。 最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成，具体方法取决于设备类型（如USB麦克风、3.5mm接口麦克风或HDMI音频输入）。以下是详细指南： 1. 连接音频输入设备 USB麦克风/声卡：直接插入树莓派的USB接口。3.5mm麦克…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...