Vue3-21-组件-子组件给父组件发送事件

情景描述

【子组件】中有一个按钮，点击按钮，触发一个事件，
我们希望这个事件的处理逻辑是，给【父组件】发送一条消息过去，
从而实现 【子组件】给【父组件】通信的效果。这个问题的解决就是 “发送事件” 这个操作。
本文就针对此操作进行详细的介绍。

子组件发送事件的两种方式

【子组件】 发送事件有两种方式：
方式一 ： html模板中直接使用 “$emit” 的方式发送事件；
方式二 ： 使用“defineEmits()” 来声明要发送的事件。【子组件】在发送事件的时候也可以携带参数。
【defineEmits() 声明式的方式 可以进行类型参数的定义】下面是案例代码：

方式一 ：$emit 直接发送事件

$emit() 可以在html模板中直接使用
$emit() 的第一个参数是 发送的事件的名称，【推荐使用驼峰命名法进行命名】
$emit() 从第二个参数开始是 发送事件所携带的参数，父组件中可以直接获取到

1、无参数

子组件

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><!-- 直接指定发送的事件的名称 --><button @click="$emit('sayHello')">点我发送一个事件</button></div></template><script setup lang="ts">import { ref } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')</script><style scoped>.childdiv{width: 300px;border: 1px solid green;}</style>

父组件

<template><div class="basediv">父组件msg : {{ msg }}<br><br><!-- 子组件的使用 : 监听子组件的事件  ： @后面的事件名称要与子组件中的对应起来；= 后面的函数名称是自己定义的要处理的逻辑--><ChildComponent @say-hello="acceptSayHello"/></div></template><script setup lang="ts">import { ref } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 接收到子组件中的发送的事件const acceptSayHello = ()=>{console.log('父组件接收到子组件发送的事件 ： sayHello')}</script><style scoped>.basediv{width: 400px;height: 200px;border: 1px solid red;}
</style>

运行效果

在这里插入图片描述

2、有参数

子组件

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><button @click="$emit('sayHello',100,'这是参数2',true,{'aa':'对象参数'})">点我发送一个带参数的事件</button></div></template><script setup lang="ts">import { ref } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')</script><style scoped>.childdiv{width: 300px;border: 1px solid green;}</style>

父组件

<template><div class="basediv">父组件msg : {{ msg }}<br><br><!-- 子组件的使用 : 监听子组件的事件  ： @后面的事件名称要与子组件中的对应起来；= 后面的函数名称是自己定义的要处理的逻辑；只写自己处理的函数名即可，无需写参数名，在逻辑处理中自动就会有的--><ChildComponent @say-hello="acceptSayHello"/></div></template><script setup lang="ts">import { ref } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 接收到子组件中的发送的事件 ： 参数直接在函数声明中接收即可const acceptSayHello = (p1:number,p2:string,p3:boolean,p4:object)=>{console.log('父组件接收到子组件发送的事件-带参数的 ： sayHello')console.log('父组件接收到子组件发送的事件-p1 : ',p1)console.log('父组件接收到子组件发送的事件-p2 : ',p2)console.log('父组件接收到子组件发送的事件-p3 : ',p3)console.log('父组件接收到子组件发送的事件-p4 : ',p4)}</script><style scoped>.basediv{width: 400px;height: 200px;border: 1px solid red;}
</style>

运行效果

在这里插入图片描述

方式二 ：defineEmits() 声明式发送事件

defineEmits() 的声明语法 ： const emitEvents = defineEmits(['事件名称1','事件名称2',...])
发送事件的方式 ： emitEvents('事件名称',参数1,参数2,...)
扩展 ： 通过 defineEmits() 声明事件的方式，可以使用ts 中的方法签名，使事件信息更完善。

1、无参数

子组件

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><button @click="sendEmit">点我发送一个defineEmits声明的事件</button></div></template><script setup lang="ts">import { ref } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 声明事件const emitsEventList = defineEmits(['sayHello'])// 点击按钮，发送事件const sendEmit = ()=>{console.log('子组件点击了按钮，发送事件-无参')emitsEventList('sayHello')}</script><style scoped>.childdiv{width: 300px;border: 1px solid green;}</style>

父组件

<template><div class="basediv">父组件msg : {{ msg }}<br><br><!-- 子组件的使用 : 监听子组件的事件  ： @后面的事件名称要与子组件中的对应起来；= 后面的函数名称是自己定义的要处理的逻辑--><ChildComponent @say-hello="acceptSayHello"/></div></template><script setup lang="ts">import { ref } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 接收到子组件中的发送的事件const acceptSayHello = ()=>{console.log('父组件接收到子组件发送的事件-无参数的 ： sayHello')}</script><style scoped>.basediv{width: 400px;height: 200px;border: 1px solid red;}
</style>

运行效果

在这里插入图片描述

2、有参数

子组件

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><button @click="sendEmit">点我发送一个defineEmits声明的带参数的事件</button></div></template><script setup lang="ts">import { ref } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 声明事件const emitsEventList = defineEmits(['sayHello'])// 点击按钮，发送事件 ： 带参数的事件const sendEmit = ()=>{console.log('子组件点击了按钮，发送事件-带参数')emitsEventList('sayHello',100,'第二个参数',false,{"aa":"对象参数的第一个属性aa"})}</script><style scoped>.childdiv{width: 300px;border: 1px solid green;}</style>

父组件

<template><div class="basediv">父组件msg : {{ msg }}<br><br><!-- 子组件的使用 : 监听子组件的事件  ： @后面的事件名称要与子组件中的对应起来；= 后面的函数名称是自己定义的要处理的逻辑--><ChildComponent @say-hello="acceptSayHello"/></div></template><script setup lang="ts">import { ref } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 接收到子组件中的发送的事件const acceptSayHello = (p1:number,p2:string,p3:boolean,p4:object)=>{console.log('父组件接收到子组件发送的事件-带参数的 ： sayHello')console.log('父组件接收到子组件使用defineEmits发送的事件-p1 : ',p1)console.log('父组件接收到子组件使用defineEmits发送的事件-p2 : ',p2)console.log('父组件接收到子组件使用defineEmits发送的事件-p3 : ',p3)console.log('父组件接收到子组件使用defineEmits发送的事件-p4 : ',p4)}</script><style scoped>.basediv{width: 400px;height: 200px;border: 1px solid red;}
</style>

运行效果

在这里插入图片描述

补充 ： 为事件标注类型的写法

【子组件】在使用defineEmits() 声明事件的时候，写成一个函数签名的方式，
指定 时间的名称和参数列表，
这样在编码的时候会有类型约束，看上去更加的规范一些。

子组件

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br><button @click="sendEmit">点我发送一个defineEmits声明的带参数的有类型标注的事件</button></div></template><script setup lang="ts">import { ref } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')// 声明事件 ： 使用类型标注的方式来声明 ： 直接声明一个函数的意思就是const emitsEventList = defineEmits<{(e:'sayHello',id:number,namep:string):void}>()// 点击按钮，发送事件 ： 带参数的事件const sendEmit = ()=>{console.log('子组件点击了按钮，发送事件-带参数')emitsEventList('sayHello',200,'第二个参数')}</script><style scoped>.childdiv{width: 300px;border: 1px solid green;}</style>

父组件

<template><div class="basediv">父组件msg : {{ msg }}<br><br><!-- 子组件的使用 : 监听子组件的事件  ： @后面的事件名称要与子组件中的对应起来；= 后面的函数名称是自己定义的要处理的逻辑--><ChildComponent @say-hello="acceptSayHello"/></div></template><script setup lang="ts">import { ref } from 'vue'// 引入子组件import ChildComponent from './ChildComponent.vue'// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')// 接收到子组件中的发送的事件const acceptSayHello = (p1:number,p2:string)=>{console.log('父组件接收到子组件发送的事件-带参数的 ： sayHello')console.log('父组件接收到子组件使用defineEmits发送的事件-p1 : ',p1)console.log('父组件接收到子组件使用defineEmits发送的事件-p2 : ',p2)}</script><style scoped>.basediv{width: 400px;height: 200px;border: 1px solid red;}
</style>

运行效果

在这里插入图片描述

在这里插入图片描述

父组件接收事件的方式

【父组件】接收事件的方式比较简单，就像监听普通元素的事件一样，可以直接使用语法糖 @ 符号来监听事件，
【注意点1】 ：【子组件】中声明事件的时候，事件的名称 使用的 “驼峰命名法”，例如 "sayHello"；【父组件】中监听事件的时候，需要使用 “中划线”的命名方式，例如 "@say-hello="xxxxxx""。【注意点2】：
【父组件】中监听【子组件】的事件的时候，
如果有参数，【父组件】中的方法可以直接写参数就好了，接收的过程会自动匹配，
无需关心 参数名的问题，接收到就可以使用。

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

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

相关文章

arthas获取spring bean

arthas获取spring bean

参考文章 arthas获取spring bean 写一个工具Util package com.example.lredisson.util;import org.springframework.beans.BeansException; import org.springframework.context.ApplicationContext; import org.springframework.context.ApplicationContextAware; import o…
阅读更多...
HarmonyOS给应用添加消息通知

HarmonyOS给应用添加消息通知

给您的应用添加通知 通知介绍 通知旨在让用户以合适的方式及时获得有用的新消息&#xff0c;帮助用户高效地处理任务。应用可以通过通知接口发送通知消息&#xff0c;用户可以通过通知栏查看通知内容&#xff0c;也可以点击通知来打开应用&#xff0c;通知主要有以下使用场景…
阅读更多...
Cell Systems | 深度学习开启蛋白质设计新时代

Cell Systems | 深度学习开启蛋白质设计新时代

今天为大家介绍的是来自Bruno Correia团队的一篇综述。深度学习领域的迅速进步对蛋白质设计产生了显著影响。最近&#xff0c;深度学习方法在蛋白质结构预测方面取得了重大突破&#xff0c;使我们能够得到数百万种蛋白质的高质量模型。结合用于生成建模和序列分析的新型架构&am…
阅读更多...
相机倾斜棋盘格标定全记录 vs200+opencv安装

相机倾斜棋盘格标定全记录 vs200+opencv安装

论文参考是这个 Geiger A, Moosmann F, Car , et al. Automatic camera and range sensor calibration using a single shot[C]//Robotics and Automation (ICRA), 2012 IEEE International Conference on. IEEE, 2012: 3936-3943. 代码是这个github 花了一上午配好了c环境。。…
阅读更多...
Flink系列之：SQL提示

Flink系列之：SQL提示

Flink系列之&#xff1a;SQL提示 一、动态表选项二、语法三、例子四、查询提示五、句法六、加入提示七、播送八、随机散列九、随机合并十、嵌套循环十一、LOOKUP十二、进一步说明十三、故障排除十四、连接提示中的冲突案例十五、什么是查询块 SQL 提示可以与 SQL 语句一起使用来…
阅读更多...
Sci. Rep. | 一个对任意分子体系实现准确且高效几何深度学习的通用框架

Sci. Rep. | 一个对任意分子体系实现准确且高效几何深度学习的通用框架

这篇工作是来自纽约城市大学/康奈尔医学院谢磊团队的一篇论文。作者提出了一个通用框架&#xff0c;PAMNet&#xff0c;可以对任意分子体系实现准确且高效的几何深度学习。在小分子性质、RNA三维结构以及蛋白质-配体结合亲和力的预测任务上&#xff0c;PAMNet在准确性和效率方面…
阅读更多...
Express中使用Swagger

Express中使用Swagger

Swagger Swagger 是一种规范&#xff0c;用于描述 API 的结构&#xff0c;功能和参数。使用 Swagger 可以提供清晰的可视化 API 文档&#xff0c;可用于 API 交互的文档驱动开发&#xff0c;以及 API 的自动化测试和集成。 使用 npm 或 yarn 下载。 npm install swagger-jsdo…
阅读更多...
【ESXi】ESXi 版本回退

【ESXi】ESXi 版本回退

目录 8. ESXi 版本回退8.1 版本回退条件与注意事项8.2 版本回退步骤8.3 示例演示&#xff08;1&#xff09;准备工作&#xff08;2&#xff09;进入DCUI界面&#xff08;3&#xff09;按 F11 重启系统引导&#xff08;4&#xff09;进入引导选项&#xff08;5&#xff09;进入 …
阅读更多...
弧形导轨的精度等级

弧形导轨的精度等级

为符合工控自动化生产制造必须&#xff0c;弧形导轨在运输武器装备领域应时而生&#xff0c;并已在电子生产制造、手机上、半导体材料、动力锂电池等领域获得广泛运用。其中&#xff0c;弧形导轨的精度等级是评估其运动精度的重要指标&#xff0c;通常包括制造精度和运行精度两…
阅读更多...
Flink系列之：大状态与 Checkpoint 调优

Flink系列之：大状态与 Checkpoint 调优

Flink系列之&#xff1a;大状态与 Checkpoint 调优 一、概述二、监控状态和 Checkpoints三、Checkpoint 调优四、RocksDB 调优五、增量 Checkpoint六、RocksDB 或 JVM 堆中的计时器七、RocksDB 内存调优八、容量规划九、压缩十、Task 本地恢复十一、主要&#xff08;分布式存储…
阅读更多...
spring-kakfa依赖管理之org/springframework/kafka/listener/CommonErrorHandler错误

spring-kakfa依赖管理之org/springframework/kafka/listener/CommonErrorHandler错误

问题&#xff1a; 整个项目使用spring-boot2.6.8版本&#xff0c;使用gradle构建&#xff0c;在common模块指定了implementation org.springframework.kafka:spring-kafka:2.6.8’这个工程也都能运行&#xff08;这正常发送kafka消息和接收消息&#xff09;&#xff0c;但是执行…
阅读更多...
java --- 集合进阶

java --- 集合进阶

目录 一、单列集合顶层接口 Collection 1.1 基本方法 1.2 Collection 的遍历方式 二、list集合 1.2 ArrayList Vector 底层结构 1.3 LinkedList ArrayList 和 LinkedList 比较 三、set接口 3.1、Set 接口和常用方法 3.2 HashSet HashSet 底层机制&#xff08;HashMap…
阅读更多...
VB.NET创建AOT无依懒的winform 独立EXE,动态库如何调用？

VB.NET创建AOT无依懒的winform 独立EXE,动态库如何调用？

public a as long 9977public function add(a as long,b as long) as longaddab end function VB.NET用AOT编绎成独立EXE,只能生成无函数的dll(默认有个DotNetRuntimeDebugHeader&#xff09;&#xff0c;无法导出自有模块或类中的API EXPORT动态库 &#xff08;AOT只能生成64…
阅读更多...
raise KeyError(key) from err KeyError: ‘sex‘

raise KeyError(key) from err KeyError: ‘sex‘

一、问题揪出&#xff1a; File “/usr/share/anaconda3/envs/tf2.0-gpu/lib/python3.7/site-packages/pandas/core/frame.py”, line 2906, in getitem indexer self.columns.get_loc(key) File “/usr/share/anaconda3/envs/tf2.0-gpu/lib/python3.7/site-packages/pandas/…
阅读更多...
Vue 宝典之动画(transition)

Vue 宝典之动画(transition)

文章目录 &#x1f951;Vue 过渡效果的基础概念&#x1fad2;<transition> 组件的基本用法&#x1fad2; 过渡类名&#x1fad2;CSS 过渡 &#x1f951;Vue.js 中的高级动画特性&#x1fad2;多个元素的过渡&#x1fad2;使用 JavaScript 钩子函数控制动画&#x1f346; …
阅读更多...
四十六----react路由

四十六----react路由

一、react 路由使用 import {render } from "react-dom"; import {BrowserRouter,Routes,Route, } from "react-router-dom"; // import your route components too render(<BrowserRouter><Routes><Route path="/" element={&l…
阅读更多...
Vue学习笔记-Vue3的toRef和toRefs

Vue学习笔记-Vue3的toRef和toRefs

toRef 作用&#xff1a;创建一个ref对象&#xff0c;其value值指向与其绑定的数据对象中的某个属性&#xff0c;当toRef创建的对象值改变时&#xff0c;与其绑定的响应式对象中对应的属性也发生改变导入&#xff1a;import {toRef} from vue使用&#xff1a;const name toRef…
阅读更多...
OSG基础学习 - 顶点数组类型、法线、绘制四边形

OSG基础学习 - 顶点数组类型、法线、绘制四边形

之前已经学习了osg加载场景的基本流程； Geometry类型是一个几何体对象；定义一个几何体对象geom1； Vec3Array是向量数组类型，定义该类型的变量v1； v1调用push_back方法放入4个向量，Vec3是三维向量； 并把v1设置为geom1的顶点数组； 法线也是用一个三维向量表示； 定义一…
阅读更多...
Python【Matplotlib】图例可拖动改变位置

Python【Matplotlib】图例可拖动改变位置

代码&#xff1a; import matplotlib.pyplot as plt from matplotlib.widgets import Button# 创建一个示例图形 fig, ax plt.subplots() line, ax.plot([1, 2, 3], labelLine 1)# 添加图例 legend ax.legend(locupper right, draggableTrue)# 添加一个按钮&#xff0c;用于…
阅读更多...
mybatis动态SQL-sql片段

mybatis动态SQL-sql片段

1、建库建表 create database mybatis-example; use mybatis-example; create table emp (empNo varchar(40),empName varchar(100),sal int,deptno varchar(10) ); insert into emp values(e001,张三,8000,d001); insert into emp values(e002,李四,9000,d001); insert into…
阅读更多...
最新文章

Copyright @ 2022~2023