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

Vue3 子组件向父组件传递消息(Events)

 子组件向父组件传递消息(Events)

子组件可以通过 $emit 触发事件,父组件可以监听这些事件并作出响应。

子组件:

<template><button @click="sendMessage">Send Message to Parent</button>
</template><script lang="ts" setup>
const emit = defineEmits(['message']);function sendMessage() {emit('message', 'Hello from Child!');
}
</script>

父组件:

<template><div><ChildComponent @message="handleMessage" /></div>
</template><script lang="ts" setup>
import ChildComponent from './ChildComponent.vue';function handleMessage(message: string) {console.log(message);
}
</script>
http://www.lryc.cn/news/515207.html

相关文章:

  • 如何清理Docker的overlay2目录下的文件
  • 《Vue3实战教程》19:Vue3组件 v-model
  • 数字PWM直流调速系统设计(论文+源码)
  • Spring Boot日志处理
  • vue3+Echarts+ts实现甘特图
  • OpenCV相机标定与3D重建(41)从 3D 物点和它们对应的 2D 图像点估算初始相机内参矩阵函数initCameraMatrix2D()的使用
  • ELK日志平台搭建 (最新版)
  • 智能化人才招聘系统是怎样的?
  • 电脑主机后置音频插孔无声?还得Realtek高清晰音频管理器调教
  • 记一次音频无输出的解决方案
  • 初学stm32 --- FSMC驱动LCD屏
  • Scala_【4】流程控制
  • mysql带自动递增列的表删除数据后如何重置递增值
  • [CTF/网络安全] 攻防世界 simple_php 解题详析
  • Android 第三方框架:网络框架:OkHttp:源码分析:缓存
  • 大数据新视界 -- Hive 集群搭建与配置的最佳实践(2 - 16 - 13)
  • C# 设计模式(结构型模式):组合模式
  • Aloudata AIR | 逻辑数据平台的 NoETL 之道
  • js的一些处理
  • NLP 复习大纲
  • Kafka的rebalance机制
  • 【git】git stash相关指令
  • BLIP论文笔记
  • 设计模式-创建型设计模式总结
  • Java-多种方法实现多线程卖票
  • 嵌入式系统开发笔记112:通过有人云测试MQTT
  • C++ Latch 和 Barrier: 新手指南
  • 【Cocos TypeScript 零基础 4.1】
  • 区块链安全常见的攻击合约和简单复现,附带详细分析——不安全调用漏洞 (Unsafe Call Vulnerability)【6】
  • 鸿蒙应用开发搬砖经验之—使用ArkWeb要开启文档对象模型存储接口权限(DOM Storage API权限)