vue3中子组件调用父组件事件

在 Vue 3 中,子组件调用父组件的事件(或方法)的方式与 Vue 2 类似,但 Vue 3 引入了 Composition API,这可能会改变你组织代码的方式。不过,基本的通信机制——通过自定义事件 ($emit) 通知父组件——仍然保持不变。

以下是如何在 Vue 3 中使用 Options API 和 Composition API 的示例:

使用 Options API

父组件 (ParentComponent.vue)

<template> 
<div> 
<h2>父组件</h2> 
<ChildComponent @child-event="handleChildEvent" /> 
</div> 
</template> <script> 
import ChildComponent from './ChildComponent.vue'; export default { 
components: { 
ChildComponent 
}, 
methods: { 
handleChildEvent(payload) { 
console.log('子组件触发的事件被父组件捕获', payload); 
} 
} 
}; 
</script>

子组件 (ChildComponent.vue)

<template> 
<div> 
<h3>子组件</h3> 
<button @click="triggerParentEvent">触发父组件事件</button> 
</div> 
</template> <script> 
export default { 
methods: { 
triggerParentEvent() { 
this.$emit('child-event', { message: '来自子组件的数据' }); 
} 
} 
}; 
</script>

使用 Composition API

父组件 (ParentComponent.vue) (这里父组件使用 Options API 或 Composition API 都可以)

子组件 (ChildComponentWithComposition.vue)

<template> 
<div> 
<h3>使用 Composition API 的子组件</h3> 
<button @click="triggerParentEvent">触发父组件事件</button> 
</div> 
</template> <script> 
import { defineComponent, ref } from 'vue'; export default defineComponent({ 
setup(props, { emit }) { 
const triggerParentEvent = () => { 
emit('child-event', { message: '来自使用 Composition API 的子组件的数据' }); 
}; return { 
triggerParentEvent 
}; 
} 
}); 
</script>

在 Composition API 中,setup 函数接收两个参数:props 和 contextcontext 是一个对象,它包含了 attrsslots 和 emit 等属性。你可以通过 context.emit 来触发事件,但更常见的做法是将 emit 直接从 setup 函数的参数中解构出来,如上面的示例所示。

在这两种情况下,子组件都通过 $emit 方法触发一个名为 child-event 的事件,并将一些数据作为有效负载传递给父组件。父组件监听这个事件,并在事件触发时调用相应的方法。

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

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

相关文章

总结:DataX

一、介绍 本文主要介绍DataX的安装与使用。 二、安装 安装&#xff1a;DataX/userGuid.md at master alibaba/DataX GitHub 六、案例 实现从MySQL同步数据到HDFS&#xff0c;然后使用Hive进行聚合计算并将结果存储回MySQL。 步骤2&#xff1a;使用DataX同步MySQL数据到H…

Day28:回溯法 491.递增子序列 46.全排列 47.全排列 II 332.重新安排行程 51. N皇后 37. 解数独

491. 非递减子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一种特殊情…

Atcoder ABC359E Water Tank 题解

题目传送门 题解 分析 分类讨论。 记第 i i i 个答案为 a n s i 1 ans_i1 ansi​1。 第 i i i 个数就是目前的最大值。 显然&#xff0c; a n s i h i i ans_ih_i \times i ansi​hi​i。第 i i i 个数就是目前的最大值。 记 l a s t i last_i lasti​ 为 i i i …

网络安全学习路线图(2024版详解)

近期&#xff0c;大家在网上对于网络安全讨论比较多&#xff0c;想要学习的人也不少&#xff0c;但是需要学习哪些内容&#xff0c;按照什么顺序去学习呢&#xff1f;其实我们已经出国多版本的网络安全学习路线图&#xff0c;一直以来效果也比较不错&#xff0c;本次我们针对市…

Java中多态的实现原理解析

Java中多态的实现原理解析 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在本文中&#xff0c;我们将深入探讨Java中多态的实现原理及其应用。多态是面向对象编…

centos中查看服务的日志

在CentOS中查看服务的日志通常涉及查看系统日志文件&#xff0c;这些文件通常位于/var/log/目录下。不同的服务可能会有不同的日志文件。以下是一些常见的日志文件和查看它们的方法&#xff1a; 1. **系统日志**&#xff1a;系统日志通常存储在/var/log/messages或/var/log/sy…

学会python——生成日志信息(python实例十二)

目录 1、认识Python 2、环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3、生成日志信息 3.1 代码构思 3.2 代码示例 3.3 运行结果 4、总结 1、认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的…

MySQL serverTimezone=UTC

在数据库连接字符串中使用 serverTimezoneUTC 是一个常见的配置选项&#xff0c;特别是当数据库服务器和应用程序服务器位于不同的时区时。这个选项指定了数据库服务器应当使用的时区&#xff0c;以确保日期和时间数据在客户端和服务器之间正确传输和处理。 UTC&#xff08;协…

Vue-双向数据绑定指令

v-model指令 双向数据绑定就是当数据设置给表单元素时&#xff0c;修改这个数据会修改表单元素的值&#xff0c; 修改表单元素的值同样也会修改这个数据 <body><div id"app"><input type"text" v-model"name"><p>{{name…

利用 Swifter 加速 Pandas 操作的详细教程

利用 Swifter 加速 Pandas 操作的详细教程 引言 Pandas 是数据分析中常用的库&#xff0c;但在处理大型数据集时效率可能会较低。Swifter 提供了一种简便的方法&#xff0c;通过并行处理来显著加速 Pandas 操作。 Swifter 简介 Swifter 是一个开源库&#xff0c;旨在自动优…

一个项目学习Vue3---创建一个 Vue 应用

步骤1&#xff1a;安装符合要求的node版本 目前官网要求使用的node.js版本为18.3及其以上 所以我们要安装node.js 18.3及其以上版本 NVM安装教程&#xff1a;一个项目学习Vue3---NVM和NPM安装-CSDN博客 若不想安装NVM&#xff0c;可以直接下载适合自己的node版本Node.js — …

Go 延迟调用 defer

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

硬件实用技巧:电阻精度和常用阻值表

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139986658 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

Linux Vim最全面的教程

Vim编辑器概述 Vim是一款功能强大的文本编辑器&#xff0c;广泛应用于Linux和Unix系统中。它是Vi编辑器的增强版&#xff0c;提供了更多的功能和更好的用户界面。Vim的特点包括多模式编辑、高度可配置性、丰富的插件生态系统以及强大的文本处理能力。 Vim的基本操作 Vim的基…

C++ 20新特性之模块

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 为什么要引入模块 在C 20之前&#xff0c;所有的代码组织都依赖于预处理器和头文件。这种方式主要存在以下四个问题&#xff1a;一是大型项目中…

来了,你的第一个AI智能体

为了能直观的感受AI智能体&#xff0c;最好的方法是亲手开发一个智能体&#xff0c;当然&#xff0c;这个智能体不能太复杂&#xff0c;否则难度太大&#xff0c;会打击我们的热情的&#xff0c;热情是很宝贵的资源&#xff0c;必须要小心呵护。 我们在国内AI平台语聚AI上搭建…

Batch入门教程

Batch学习在多个领域有不同的应用&#xff0c;但最常见的是在机器学习和教育学习领域。以下是一个关于Batch学习入门的清晰指南&#xff0c;将分别介绍这两个领域中的Batch学习概念、方法和一些实用信息。 1. 机器学习中的Batch学习 定义与概念 Batch_Size&#xff1a;在机器…

RK3588 Android13 TvSetting 中增加 WebView 切换菜单

前言 电视产品,客户要求在设置中设备偏好设置子菜单下增加一个 WebView切换菜单,一开始不知道怎么下手,后来想起来在设置开发者选项里有一个类似的菜单, 去把实现逻辑搞出来应该就ok。 效果图 TvSetting 部分修改文件清单 packages/apps/TvSettings/Settings/res/values…

【吊打面试官系列-Mysql面试题】为表中得字段选择合适得数据类型

大家好&#xff0c;我是锋哥。今天分享关于 【为表中得字段选择合适得数据类型】面试题&#xff0c;希望对大家有帮助&#xff1b; 为表中得字段选择合适得数据类型 字段类型优先级: 整形>date,time>enum,char>varchar>blob,text 优先考虑数字类型&#xff0c;其次…

npm-check【实用教程】升级项目中的依赖

安装 npm-check npm i -g npm-check检查项目中的依赖 npm-check会显示项目中没有使用&#xff0c;以及有新版本的依赖 升级项目中的依赖 npm-check -u方向键上下可以移动图中左侧的箭头空格键可选中/取消选中标注为 Major Update 和 Non-semver 类的版本&#xff0c;需去官网查…