【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件

文章目录

      • 一、自定义事件概念及使用场景
      • 二、代码解释
      • 三、新的示例

一、自定义事件概念及使用场景

  1. 概念
    在 Vue 3.0 中,自定义事件是一种组件间通信的机制,允许子组件向父组件传递数据或触发父组件中的操作。子组件通过defineEmits函数定义可以触发的事件,父组件通过v-on(或@)指令监听子组件触发的这些自定义事件,并在事件处理函数中接收和处理数据。这种方式遵循了单向数据流的原则,同时实现了父子组件之间灵活的数据交互。

  2. 使用场景

    • 用户交互反馈:例如在一个表单组件中,子组件(如输入框组件)可以在用户输入完成并提交时,通过自定义事件将用户输入的值传递给父组件,父组件再进行数据验证和后续处理。
    • 状态更新通知:当子组件内部状态发生变化,且这个变化需要让父组件知晓并做出相应反应时,比如子组件中的某个任务完成状态改变,通过自定义事件通知父组件更新相关显示或执行其他操作。
    • 动态数据传递:子组件根据自身逻辑生成一些数据,需要传递给父组件来更新父组件的视图或进行其他业务逻辑处理,如在一个动态列表组件中,子组件对列表项的操作结果传递给父组件。

二、代码解释

  1. Child.vue 组件
    • 模板部分
<template><div class="child"><h3>子组件</h3><h4>玩具:{{ toy }}</h4><button @click="emit('send - toy', toy)">测试</button></div>
</template>

这里定义了一个按钮,当点击按钮时,会触发send - toy自定义事件,并将toy的值作为参数传递出去。

- **脚本部分**:
import { ref, onMounted } from "vue";
// 数据
let toy = ref('奥特曼');
// 声明事件
const emit = defineEmits(['send - toy']);
// //挂载3s之后触发事件
// onMounted(() => {
//   setTimeout(() => {
//     emit('send - toy');
//   }, 3000);
// });
  - 首先,使用`ref`创建了一个响应式数据`toy`,其初始值为`奥特曼`。- 然后,通过`defineEmits`定义了`send - toy`这个自定义事件,这使得子组件可以触发这个事件向父组件传递信息。注释部分代码原本是在组件挂载 3 秒后触发`send - toy`事件。
  1. Father.vue 组件
    • 模板部分
<template><div class="father"><h3>父组件</h3><h4 v - show="toy">子给的玩具:{{ toy }}</h4><!-- 给子组件Child绑定事件 --><Child @send - toy="saveToy" /></div>
</template>

这里在子组件Child标签上使用@send - toy监听了子组件触发的send - toy事件,并将事件处理函数绑定为saveToy。当子组件触发该事件时,父组件中的saveToy函数会被调用。

- **脚本部分**:
import Child from './Child.vue';
import { ref } from "vue";
// 数据
let toy = ref('');
// 用于保存传递过来的玩具
function saveToy(value: string) {console.log('saveToy', value);toy.value = value;
}
  - 首先,引入了子组件`Child`。- 接着,使用`ref`创建了一个响应式数据`toy`,初始值为空字符串。- 定义了`saveToy`函数,它接收子组件传递过来的值(这里是玩具名称的字符串),在函数内部,先在控制台打印接收到的值,然后将`toy`的值更新为接收到的值,这样就实现了子组件向父组件传递数据并更新父组件状态的功能。

这里给出一个整体的父子组件的代码概览,更有助于我们的理解
在这里插入图片描述

效果图:
未点击按钮之前:
在这里插入图片描述

点击按钮之后:
在这里插入图片描述

三、新的示例

假设我们有一个包含多个商品卡片的购物车组件,每个商品卡片是一个子组件,当点击商品卡片上的“删除”按钮时,需要通知父组件(购物车组件)从购物车中删除该商品。

  1. 子组件(ProductCard.vue)
<template><div class="product - card"><img :src="product.image" alt="Product Image"><h4>{{ product.name }}</h4><p>Price: ${{ product.price }}</p><button @click="emit('delete - product', product.id)">删除</button></div>
</template><script setup lang="ts" name="ProductCard">
import { defineEmits } from "vue";
import { product } from './productData'; // 假设这里有商品数据const emit = defineEmits(['delete - product']);
</script><style scoped>
.product - card {border: 1px solid gray;padding: 10px;margin: 10px;text - align: center;
}
</style>
  1. 父组件(ShoppingCart.vue)
<template><div class="shopping - cart"><h2>购物车</h2><div v - for="(product, index) in cartProducts" :key="index"><ProductCard :product="product" @delete - product="removeProduct" /></div></div>
</template><script setup lang="ts" name="ShoppingCart">
import ProductCard from './ProductCard.vue';
import { ref } from "vue";
import { products } from './productData'; // 假设这里有商品数据列表const cartProducts = ref([...products]); // 模拟购物车中的商品列表const removeProduct = (productId: number) => {const updatedCart = cartProducts.value.filter((product) => product.id!== productId);cartProducts.value = updatedCart;
};
</script><style scoped>
.shopping - cart {background - color: lightgray;padding: 20px;
}
</style>

在这个示例中,子组件ProductCard通过自定义事件delete - product将商品的id传递给父组件ShoppingCart,父组件根据id从购物车商品列表中删除对应的商品。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470684.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java的dto,和多表的调用

1理论 需求是新增菜品eg&#xff1a;菜名:豆腐脑&#xff1b;口味&#xff1a;甜口&#xff0c;咸口&#xff0c; 菜单表&#xff1a;dish&#xff1b;口味表dish_flavor&#xff1b; 1dto:数据传输对象 新建一个dishDto对象有两个表里的属性 2用到两个表&#xff0c;dish,d…

【前端学习指南】Vue computed 计算属性 watch 监听器

&#x1f36d; Hello&#xff0c;我是爱吃糖的范同学 &#x1f534; 想把自己学习技术的经历和一些总结分享给大家&#xff01; &#x1f534; 通过这样的方式记录自己成长&#xff0c;同时沉淀自己的技术&#xff0c;我会把所有额外的时间和经历投放到CSDN和公众号&#xff0…

【算法】——二分查找合集

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 零&#xff1a;二分查找工具 1&#xff1a;最基础模版 2&#xff1a;mid落点问题 一&#xff1a;最…

读数据质量管理:数据可靠性与数据质量问题解决之道03数据目录

1. 同步数据 1.1. 不同的数据仓库和数据湖通过数据集成层来进行桥接 1.2. AWS Glue、Fivetran和Matillion等数据集成工具从不同来源收集数据&#xff0c;统一这些数据&#xff0c;并将其转换为上游来源 1.3. 数据集成的一个典型用例是收集数据湖的数据并以结构化格式将其加载…

openSUSE 环境下通过 zypper 安装软件

操作场景 为了提升您在云服务器上的软件安装效率&#xff0c;减少下载和安装软件的成本&#xff0c;腾讯云提供了 zypper 下载源。openSUSE 操作系统和部分 SLES 的云服务器用户可通过 zypper 快速安装软件。本文档以 openSUSE 操作系统为例&#xff0c;指导您通过 zypper 快速…

ima.copilot-腾讯智能工作台

一、产品描述 ima.copilot是腾讯推出的基于腾讯混元大模型技术的智能工作台&#xff0c;通过先进的人工智能技术&#xff0c;为用户提供了一个全新的搜读写体验&#xff0c;让知识管理变得更加智能和高效。它不仅是一个工具&#xff0c;更是一个智能的伙伴&#xff0c;能够帮助…

NVIDIA Isaac Sim 仿真平台体验测评

目录 一、引言二、GPU加速相关体验2.1 Isaac Sim GPU 加速体验2.2 GPU加速体验分析 三、AI框架集成相关体验四、学术研究价值五、开发生态六、综合分析6.1 主要优势6.1.1 仿真效率6.1.2 开发便利性6.1.3 与 AI 框架的协同性 6.2 潜在应用场景 七、运行体验与建议7.1 GPU加速与P…

WebRTC API分析

主题 本文详细描述常用的webrtc api 媒体协商类 myPeerConnection.createOffer([options]); var options { offerToReceiveAudio: true, // 告诉另一端&#xff0c;你是否想接收音频&#xff0c;默认true offerToReceiveVideo: true, // 告诉另一端&a…

11张思维导图带你快速学习java

博主主页:【南鸢1.0】 本文专栏&#xff1a;JAVA 本文目录 简介 1.Java SE​编辑 2.Java Web 3.MySQL​编辑 4.前端技术 5.Linux 6.Spring SpringMvc mybatis 7.JVM 8.Springboot 9.Vue 10.SpringCloud 11.常用中间件 总结 简介 Java是一种跨平台的编程语言&am…

Jmeter基础篇(22)服务器性能监测工具Nmon的使用

一、前言 我们在日常做压测的过程中&#xff0c;不仅仅需要监控TPS&#xff0c;响应时间&#xff0c;报错率等这些系统基础性能数据&#xff0c;还需要对服务器的性能&#xff08;如CPU、磁盘、内存、网络IO等&#xff09;做监控&#xff0c;以求对系统运行过程中的硬件性能有…

Unity3D学习FPS游戏(12)敌人检测和攻击玩家

前言&#xff1a;上一篇实现了敌人能动&#xff0c;有了点乐趣&#xff0c;但是敌人和玩家没什么对抗性。本篇将实现敌人追击玩家&#xff0c;并攻击玩家。 敌人攻击玩家 敌人检测玩家目标思路-碰撞检测的Trigger触发实现 敌人攻击目标思路-模仿玩家发射子弹的思路实现 效果 敌…

利用滑动窗口解题

目录 前言&#xff1a; 第一题&#xff1a;209. 长度最小的子数组 - 力扣&#xff08;LeetCode&#xff09; 第二题&#xff1a;1004. 最大连续1的个数 III - 力扣&#xff08;LeetCode&#xff09; 第三题&#xff1a;3. 无重复字符的最长子串 - 力扣&#xff08;LeetCode&…

车载空气净化器语音芯片方案

开发背景&#xff1a; 随着人们生活质量的不断提升和环保意识的日益增强&#xff0c;车内空气质量成为了广大车主关注的焦点。长时间封闭的车厢环境&#xff0c;加之城市空气污染、新车内饰材料释放的有害气体等因素&#xff0c;使得车内空气质量往往不尽如人意&#xff0c;严重…

《MYSQL45讲》误删数据怎么办

对误删数据分类的话&#xff0c;有 1.delete 误删行 2.drop table 或者truncate table 语句误删表 3.使用drop database 误删数据库 4.使用rm命令误删整个MYSQL实例 一&#xff0c;误删行 一下操作前置条件是&#xff1a;binlog的格式是row&#xff0c;并且binglog_row_im…

不对称信息

你买了一辆二手车&#xff0c;你并不知道它出过几次事故&#xff0c;但它之前的车主却对此了如指掌。来买保险的公司都是那些出险概率很大的&#xff08;比如矿工、化工厂&#xff09;&#xff0c;但那些安全的公司很少去买保险&#xff0c;这两种问题都属于信息不对称问题。 …

94个属于一区且接受医工交叉领域投稿的期刊汇总|个人观点·24-11-13

小罗碎碎念 继汇总病理AI的基础模型、病理组学&影像组学的公开数据集以后&#xff0c;我们再来盘一盘医工交叉领域有哪些热门期刊可以投稿。我会分区进行介绍&#xff0c;每个区则会进一步划分学科种类&#xff0c;方便大家选择适合自己的投稿期刊。 这期推文先分享大类属…

网站小程序app怎么查有没有备案?

网站小程序app怎么查有没有备案&#xff1f;只需要官方一个网址就可以&#xff0c;工信部备案查询官网地址有且只有一个&#xff0c;百度搜索 "ICP备案查询" 找到官方gov.cn网站即可查询&#xff01; 注&#xff1a;网站小程序app备案查询&#xff0c;可通过输入单位…

MySQL45讲 第二十讲 幻读是什么,幻读有什么问题?

文章目录 MySQL45讲 第二十讲 幻读是什么&#xff0c;幻读有什么问题&#xff1f;一、幻读的定义二、幻读带来的问题&#xff08;一&#xff09;语义问题&#xff08;二&#xff09;数据一致性问题 三、InnoDB 解决幻读的方法四、总结 MySQL45讲 第二十讲 幻读是什么&#xff0…

FatLab:我的编程课程系列

FatLab 是一款教程类软件。 大概是因为我的编程生涯始于自学&#xff0c;FatLab便也保持了这种气息&#xff1a;从一个“自然生长”的角度提供了一套C语言教程。 教程方面&#xff0c;目前仅完成了《C语言基础要素》系列。正如其名&#xff0c;这个系列仅探讨了语言中非常基础…

冗余连接2 hard题 代随C#写法

此题在卡码网109与力扣685题亦有记载 有一说一C#写法我没咋搞懂 就看明白了思路 这里贴一个答案待后续我醒悟了再来看罢 难就难在对整体数据结构classUnion&#xff08;并查集&#xff09;的理解不熟并且 对于输入输出这个迭代过程理解上也比较吃力 109. 冗余连接II 题…