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

Vue.js自定义事件的使用(实现父子之间的通信)

vue

v-model修饰符:.lazy、.number、.trim

$attrs数据的透传,在组件(这个是写在App.vue中),数据就透传到student组件中,在template中可以直接使用{{$attrs.students}}获取数据

通过defineProps定义的属性在attrs中就不存在了,通过自定义属性时,最好通过defineProps来声明一下

app.vue中,组件中通过defineProps来进行自定义属性。推荐这种方式。

<script setup>const props = defineProps(["students"])//删除const delStuHandler = (index)=>{if(confirm("确认删除?")){props.students.splice(index,1)}}
</script>
<template>
<tr v-for="(stu,index) in props.students"><td>{{stu.id}}</td><td><a href="#" @click.prevent="delStuHandler(index)"></a></td>
</tr>
</template>

:表示普通属性,@表示事件的形式

自定义事件

上面的方式在模板中去修改了App.vue的属性(STU_ARR),这种方式不好,好的方式是“自己管理对象”的方式,因此可以使用自定义事件的方式实现

app.vue

以属性的方式将函数传进去,使用props进行接收

<script setup>
import Student from "./components/Student.vue"
import {ref} from "vue"
const STU_ARR = ref([{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"}
])
const delStuByIndex = (index)=>{STU_ARR.value.splice(index,1)
}
</script>
<template>
<Student :student="STU_ARR" :fn="delStuByIndex"></Student>
</template>

在student.vue中

<script setup>const props = defineProps(["students","fn"])const delStuHandler = (index)=>{if(confirm("确认删除?")){// props.students.splice(index,1)props.fn(index)}}
</script>

使用事件的方式传递,@del-stu使用这个方式进行事件命名。

我们可以将组件中的方法(app.vue)以自定义事件的形式发送给其他的组件,此时不能通过defineProps接收了

<script setup>
import Student from "./components/Student.vue"
import {ref} from "vue"
const STU_ARR = ref([{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"}
])
const delStuByIndex = (index)=>{STU_ARR.value.splice(index,1)
}
</script>
<template>
<Student :student="STU_ARR" @del-stu="delStuByIndex"></Student>
</template>

在student.vue中使用方式:

在模板中可以通过$emit()来触发自定义事件

事件定义时使用"-"的命名方式,在使用的时候可以使用驼峰的方式进行使用

<script setup>const props = defineProps(["students"])const emits = defineEmits(["delStu"])//删除const delStuHandler = (index)=>{if(confirm("确认删除?")){// props.students.splice(index,1)// props.fn(index)emits("delStu",index)}}
</script>
<template>
<tr v-for="(stu,index) in props.students"><td>{{stu.id}}</td><td><!--<a href="#" @click.prevent="$emit('delStu',index)"></a><a href="#" @click.prevent="emits('delStu',index)"></a>--><a href="#" @click.prevent="delStuHandler(index)"></a></td>
</tr>
</template>

自定义事件的使用场景:

当我们需要调用其他组件上的方法,比如app.vue或者其他组件,我们可以通过自定义事件的方式将方法传给需要调用方法的组件,使用emit进行触发调用,很方便。

在一些子组件给父组件传信息的时候,因为props是自上向下传递数据的,父组件给子组件设置props,给子组件传递数据,因此可以使用自定义事件的方式实现父子之间的通信。(props是单向的,但是也是可以实现子传父的操作,需要在父组件中定义一个方法,在合适的时机,子组件触发这个函数,就可以实现子传父的操作,但是实现起来不如自定义事件方便)

相关文章:

Vue.js自定义事件的使用(实现父子之间的通信)

vue v-model修饰符&#xff1a;.lazy、.number、.trim $attrs数据的透传&#xff0c;在组件&#xff08;这个是写在App.vue中&#xff09;,数据就透传到student组件中&#xff0c;在template中可以直接使用{{$attrs.students}}获取数据 通过defineProps定义的属性在attrs中就…...

第12天-商品维护(发布商品、商品管理、SPU管理)

1.发布商品流程 发布商品分为5个步骤&#xff1a; 基本信息规格参数销售属性SKU信息保存完成 2.发布商品-基本信息 2.1.会员等级-会员服务 2.1.1.会员服务-网关配置 在网关增加会员服务的路由配置 - id: member_routeuri: lb://gmall-memberpredicates:- Path/api/member/…...

动态分区分配计算

动态分区分配 内存连续分配管理分为&#xff1a; 单一连续分配固定分区分配动态分区分配&#xff08;本篇所讲&#xff09; 首次适应算法&#xff08;First Fit&#xff0c;FF&#xff09; 该算法又称最先适应算法&#xff0c;要求空闲分区按照首地址递增的顺序排列。 优点…...

【云原生】k8s的pod基本概念

一、资源限制 Pod 是 kubernetes 中最小的资源管理组件&#xff0c;Pod 也是最小化运行容器化应用的资源对象。一个 Pod 代表着集群中运行的一个进程。kubernetes 中其他大多数组件都是围绕着 Pod 来进行支撑和扩展 Pod 功能的&#xff0c;例如用于管理 Pod 运行的 StatefulSe…...

【史上最全面esp32教程】激光与食人鱼模块篇

文章目录食人鱼模块模块介绍连线说明操作激光模块模块介绍连线说明操作总结提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 食人鱼模块 模块介绍 采用食人鱼LED设计制作一个发光的电子模块&#xff0c;其实他的本质和LED无区别。 连线说明 名称接线…...

《代码整洁之道》二之有意义的命名

1.有意义的命名 1.1 名副其实 取个好名字需要花时间&#xff0c;但是价值远超取名的时间&#xff0c;一旦发现更好的名称就换掉旧的。这么做&#xff0c;读你代码的人都会很开心。 变量名、方法名、类名称需要清晰的告诉别人含义&#xff0c;如果名称需要注释来补充&#xf…...

天气预测demo

天气预测1 数据集介绍1.1 训练集1.2 测试集2 导入数据进行数据分析2.1 浏览数据2.2 探索数据2.2.1 查看数据类型1 数据集介绍 1.1 训练集 训练集中共有116369个样本&#xff0c;每个样本有23个特征&#xff0c;特征具体介绍如下&#xff1a; 列名解释Date&#xff1a;日期&a…...

HDMI协议介绍(四)--Video

目录 视频格式 RGB444 YUV444 YUV422 YUV420 Color Depth Video控制信号 Pixel Repetition HDMI支持多种视频格式和分辨率。以hdmi1.4和2.0协议来说&#xff0c;视频格式支持RGB444、YUV444、YUV422和YUV420&#xff0c;其中RGB444和YUV444一般都是要求支持的。 视频格式…...

微信授权登录流程以及公众号配置方法(golang后端)

一、准备一个已经认证OK的微信公众号和已经备案的域名&#xff0c;且解析好配置好https证书。 1.如上图 微信公众号 > 基本配置 &#xff0c;设置开发者密码 2.设置IP白名单&#xff0c;白名单填写提供后端服务的服务器公网IP 二、公众号服务器配置。 1.找到基本配置 2.将服…...

【软件测试面试题】大厂头条:如何定位bug?实际案例拿offer还不简单......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 问题&#xff1a; 用…...

kubeconfig生成最高权限的token

参考文档 1.https://kubernetes.io/zh-cn/docs/reference/access-authn-authz/authentication/ 2. https://kubernetes.io/zh-cn/docs/reference/access-authn-authz/rbac/ 操作流程 生成kubernetes集群最高权限admin用户的token admin-role.yaml kind: ClusterRoleBindin…...

Android 9.0 蓝牙去掉传输文件的功能

1.概述 在9.0的系统rom定制化产品开发中,在原生系统中蓝牙这块的功能也是非常重要的,所以在对蓝牙功能开发过程中,对功能的定制要求也多,在蓝牙的开发需求中,功能要求 也是越来越多的,产品需要要求在蓝牙文件传输过程中,进行限制就是不让蓝牙传输文件,所以要求在开始传…...

C语言指针易错点—字符数组与字符指针

C语言指针易错点—字符数组与字符指针字符数组与字符指针的区别字符数组与字符指针的区别举例字符指针必须先赋值&#xff0c;后引用字符数组与字符指针的区别 因为字符数组与字符指针都可以表示字符串&#xff0c;但他们不是等价的。下面就来讲讲他们的区别。 char sa[ ] &…...

Yolov3,v4,v5区别

网络区别就不说了&#xff0c;ipad笔记记录了&#xff0c;这里只说其他的区别1 输入区别1.1 yolov3没什么特别的数据增强方式1.2 yolov4Mosaic数据增强Yolov4中使用的Mosaic是参考2019年底提出的CutMix数据增强的方式&#xff0c;但CutMix只使用了两张图片进行拼接&#xff0c;…...

基于Appium+WinAppDriver+Python的winUI3应用的自动化框架搭建分享(一)环境配置

安装WinAppDriver下载并安装WinAppDriver:来源 https://github.com/Microsoft/WinAppDriver/releases开启电脑的开发者模式设置-隐私和安全性-开发者选项-开发人员模式安装Appium安装Appium Server Gui https://github.com/appium/appium-desktop/releases安装Appium Inspector…...

使用docker安装RocketMQ

文章目录1.创建namesrv服务拉取镜像创建namesrv数据存储路径构建namesrv容器2.创建broker节点创建broker数据存储路径创建配置文件构建broker容器3.创建rockermq-console服务拉取镜像构建rockermq-console容器需要关闭防火墙或者开放namesrv和broker端口关闭防火墙开放指定端口…...

【FPGA仿真】Matlab生成二进制、十六进制的txt数据以及Vivado读取二进制、十六进制数据并将结果以txt格式保存

Matlab 生成二进制、十六进制数据 在使用Vivado软件进行Verilog程序仿真时可能需要对模块输入仿真的数据&#xff0c;因此我们需要一个产生数据的方法&#xff08;二进制或者十六进制的数据&#xff09;&#xff0c;Matlab软件是一个很好的工具&#xff0c;当然你也可以使用VS…...

【第四章 IOC操作bean管理(基于注解方式创建对象,注入属性),完全注解开发】

第四章 IOC操作bean管理&#xff08;基于注解方式创建对象&#xff0c;注入属性&#xff09;&#xff0c;完全注解开发 1.IOC操作bean管理&#xff08;基于注解方式&#xff09; &#xff08;1&#xff09;什么是注解&#xff1a; ①注解是代码特殊标记&#xff0c;格式&#…...

【手把手一起学习】(六) Altium Designer 20 STM32核心板Demo----PCB设计

1 PCB设计 PCB设计是制作STM32核心板的关键步骤&#xff0c;其关系到最终生产厂家制作的电路板能否正常使用&#xff0c;PCB设计包括布局&#xff0c;裁板&#xff0c;布线&#xff0c;覆铜&#xff0c;DRC检查等&#xff0c;其中要求、细节、技巧比较多&#xff0c;以后会更详…...

【蓝桥杯集训·周赛】AcWing 第92场周赛

文章目录第一题 AcWing 4864. 多边形一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解第二题 AcWing 4865. 有效类型一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解第三题 AcWing 4866. 最大数量一、题目1、原…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

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

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

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...