一、什么是自定义事件?

  • 自定义事件是 Vue 组件间通信的一种机制。
  • 子组件通过 this.$emit('事件名', 数据) 触发一个事件。
  • 父组件监听这个事件并执行相应的逻辑。

二、基本使用

准备工作

demo 继续使用笔记8中的 链接为demo

在views文件夹下 创建新的文件夹为customevent

在customevent文件夹下

创建文件Parent.vue

<template><div class="props-text"><h1>custom event  自定义事件</h1><h1>我是父组件</h1></div>
</template>
<script setup></script><style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

添加路由

import {createRouter , createWebHistory} from 'vue-router'
const routes = [{path: '/',name: 'index',component: () => import('@/views/index.vue')},{path: '/props',name: 'props',component: () => import('@/views/props/Parent.vue')},{path: '/customevent',name: 'customevent',component: () => import('@/views/customevent/Parent.vue')},]const router = createRouter({history: createWebHistory(),routes
})
export default router

在APP.vue 中 添加导航

<script setup></script><template>
<div class="com"><h1>各种Vue组件间通信/传值</h1><div><h2 style="display: inline">演示:</h2>&nbsp;&nbsp;<router-link to="/">index</router-link>&nbsp;&nbsp;<router-link to="/props">props</router-link>&nbsp;&nbsp;<router-link to="/customevent">custom event</router-link>&nbsp;&nbsp;</div><br><router-view></router-view></div>
</template><style  scoped>.com {margin: 10px;}</style>
<style>.box {border: solid 1px #aaa;margin: 5px;padding: 5px;}
</style>

当父组件想给 子组件绑定一个原生dom事件时

创建子组件1

在customevent文件夹下

创建文件Child1.vue

<template><div><div class="child1"><div class="child1-title">Child1</div></div></div>
</template>
<script setup></script>
<style scoped>.child1{background-color: red;height: 100px;width: 100px;}.child1-title{color: white;}</style>

在父组件中 引用子组件1

<template><div class="props-text"><h1>custom event  自定义事件</h1><h1>我是父组件</h1><hr><!--vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件vue3框架下面写法其实即为原生DOM事件vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件 --><Child1 @click="handler2(1,2,$event)"></Child1></div>
</template>
<script setup>
import Child1 from './Child1.vue'const handler1 = () => {console.log('父组件点击了')
}const handler2 = (a,b,$event) => {console.log(a,b,$event)
}
</script><style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

效果展示:

此时handler2自定义事件  点击子组件任意地方 都可触发

例如 在子组件1中 添加一个按钮 

子组件代码

<template><div><div class="child1"><div class="child1-title">Child1</div><button>点我也触发</button></div></div>
</template>
<script setup></script>
<style scoped>.child1{background-color: red;height: 100px;width: 100px;}.child1-title{color: white;}</style>

 点击按钮时  控制台输入的结果是一样的

 当子组件想给父组件传递信息时  使用自定义事件

创建子组件2

<template><div><div class="Child2"><div class="Child2-title">Child2</div><button @click="handler">点击我触发方法xxx</button></div></div>
</template>
<script setup>
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx'])const handler = ()=>{//第一个参数:事件类型 第二个|三个|N参数即为注入数据$emit('xxx','参数1','参数2');
}</script>
<style scoped>.Child2{background-color: red;height: 100px;width: 100px;}.Child2-title{color: white;}</style>

defineEmits 是 Vue 3 中用于在 Composition API(组合式 API)中定义组件所触发的事件的一种方式,尤其是在使用 <script setup> 语法时非常常见。

作用:

defineEmits 允许你声明一个组件可以向外触发的自定义事件。它返回一个函数,你可以用这个函数来触发事件并传递参数。

  • defineEmits 接收一个数组,数组中的每一项是组件会触发的事件名。
  • emit 是一个函数,用于触发这些事件,并传递数据。

父组件注入子组件2  

<template><div class="props-text"><h1>custom event  自定义事件</h1><h1>我是父组件</h1><hr><!--vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件vue3框架下面写法其实即为原生DOM事件vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件 --><Child1 @click="handler2(1,2,$event)"></Child1><hr><!-- 自定义事件  --><Child2 @xxx="handler3" @click="handler4"></Child2></div>
</template>
<script setup>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'const handler1 = () => {console.log('父组件点击了')
}
const handler2 = (a,b,$event) => {console.log(a,b,$event)
}const handler3 = (paramsa,paramsb) => {console.log(paramsa,paramsb)
}const handler4 = () => {alert('Dom原生事件 被触发了');
}</script><style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

控制台输出

并且弹框  弹框内容为  Dom原生事件 被触发了 

如果你在组件2中 click添加到自定义事件 则click原生dom变成了自定义事件

子组件代码

<template><div><div class="Child2"><div class="Child2-title">Child2</div><button @click="handler">点击我触发方法xxx</button></div></div>
</template>
<script setup>
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx','click'])const handler = ()=>{//第一个参数:事件类型 第二个|三个|N参数即为注入数据$emit('xxx','参数1','参数2');
}</script>
<style scoped>.Child2{background-color: red;height: 100px;width: 100px;}.Child2-title{color: white;}</style>

再次点击父组件的时候 弹框没有了

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

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

相关文章

深入理解Reactor调试模式:Hooks.onOperatorDebug() vs ReactorDebugAgent.init()

在现代Java开发中&#xff0c;调试Reactor流是确保应用程序性能和稳定性的关键步骤。Reactor调试模式提供了多种初始化方法&#xff0c;其中最常用的两种是Hooks.onOperatorDebug()和ReactorDebugAgent.init()。本文将深入探讨这两种方法的区别&#xff0c;帮助开发者选择最适合…

QT6 源(151)模型视图架构里的表格窗体视图 QTableWidget 篇一:先学习俩属性以及 public 权限的公共成员函数,

&#xff08;1&#xff09;本篇的内容因为是子类&#xff0c;内容较视图基类简单了一些。又因为时间紧迫&#xff0c;不再详细举例了。详细的测试可以满足好奇心&#xff0c;也可以增强写代码的自信心。奈何时间不够。不完美&#xff0c;就不完美了。以后有机会&#xff0c;再补…

ffmpeg 下载、安装、配置、基本语法、避坑指南(覆盖 Windows、macOS、Linux 平台)

ffmpeg 下载、安装、配置、基本语法、避坑指南&#xff08;覆盖 Windows、macOS、Linux 平台&#xff09; 本文是一篇面向初学者的超详细 FFmpeg 教程&#xff0c;包括 FFmpeg 下载、安装、配置、基本语法 与 避坑指南。覆盖 Windows、macOS、Linux 平台的安装方式与 环境变量…

Kotlin 安装使用教程

一、Kotlin 简介 Kotlin 是 JetBrains 开发的一种现代、静态类型的编程语言&#xff0c;完全兼容 Java&#xff0c;主要应用于 Android 开发、后端服务开发、前端 Web 开发&#xff08;Kotlin/JS&#xff09;和多平台开发&#xff08;Kotlin Multiplatform&#xff09;。 二、…

day08-Elasticsearch

黑马商城作为一个电商项目&#xff0c;商品的搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的&#xff0c;存在很多问题。 首先&#xff0c;查询效率较低。 由于数据库模糊查询不走索引&#xff0c;在数据量较大的时候&#xff0c;查询性能很…

transformers 笔记:自定义模型(配置+模型+注册为AutoCLass+本地保存加载)

Transformers 模型设计上是可定制的。每个模型的代码都包含在 Transformers 仓库的 model 子文件夹中&#xff08;transformers/src/transformers/models at main huggingface/transformers&#xff09;&#xff0c;每个模型文件夹通常包含&#xff1a; modeling.py&#xff1…

Java工具类,对象List提取某个属性为List,对象List转为对象Map其中某个属性作为Key值

Java工具类package org.common;import lombok.extern.slf4j.Slf4j;import java.util.*; import java.util.stream.Collectors;Slf4j public final class CollectorHelper {/*** param element* param propertyName* param <E>* return*/public static <E> List toL…

ATE FT ChangeKit学习总结-20250630

目录 一、基本概念 二、主要特点 三、BOM LIST Shuttle Hot Plate Dock Plate Contactor 四、设计要点 五、参考文献与链接 一、基本概念 Change Kit在半导体封装测试领域中是一个重要的组件,它作为Handler(自动化分类机)的配套治具,在芯片测试过程中发挥着关键作…

【网络协议安全】任务14:路由器DHCP_AAA_TELNET配置

本文档将详细介绍在华为 eNSP 仿真环境中&#xff0c;实现路由器 DHCP 服务器功能、AAA 认证以及 TELNET 远程登录配置的完整步骤&#xff0c;适用于华为 VRP 系统路由器。 一、配置目标 路由器作为 DHCP 服务器&#xff0c;为局域网内的设备自动分配 IP 地址、子网掩码、网关…

深度探索:现代翻译技术的核心算法与实践(第一篇)

引言:翻译技术的演进之路 从早期的基于规则的机器翻译(RBMT)到统计机器翻译(SMT),再到如今主导行业的神经机器翻译(NMT),翻译技术已经走过了漫长的发展道路。现代翻译系统不仅能够处理简单的句子,还能理解上下文、识别领域术语,甚至捕捉微妙的文化差异。 本系列文章将带…

玩转Docker | 使用Docker部署NotepadMX笔记应用程序

玩转Docker | 使用Docker部署NotepadMX笔记应用程序 前言一、NotepadMX介绍工具简介主要特点二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署NotepadMX服务下载NotepadMX镜像编辑部署文件创建容器检查容器状态检查服务端口安全设置四、访问NotepadMX服务访…

Web前端:not(否定伪类选择器)

not&#xff08;否定伪类选择器&#xff09;CSS中的 :not() 选择器是⼀个否定伪类选择器&#xff0c;它⽤于选择不符合给定选择器的元素。这是⼀种排除特定元素的⽅法&#xff0c;可以⽤来简 化复杂的选择器&#xff0c;提⾼ CSS 规则的灵活性和精确性。:not() 选择器的基本语法…

【BTC】比特币网络

目录 一、比特币网络架构 1.1 节点加入与离开 二、消息传播方式 三、交易处理机制 四、网络传播问题 五、实际应用问题及解决 本章节讲比特币网络的工作原理&#xff0c;讲解新创建的区块是如何在比特币网络中传播的。 一、比特币网络架构 比特币工作在应用层&#xff…

Clickhouse 的历史发展过程

20.5.3 开始支持多线程20.6.3 支持explainmysql 20.8 实时同步mysql&#x1f4cc; ‌一、早期版本阶段&#xff08;1.1.x系列&#xff09;‌‌版本范围‌&#xff1a;1.1.54245&#xff08;2017-07&#xff09;→ 1.1.54394&#xff08;2018-07&#xff09;‌核心特性‌&#x…

玩转n8n工作流教程(一):Windows系统本地部署n8n自动化工作流(n8n中文汉化)

在Windows系统下使用 Docker 本地部署N8N中文版的具体操作&#xff0c;进行了详尽阐述&#xff0c;玩转n8n工作流教程系列内容旨在手把手助力从0开始一步一步深入学习n8n工作流。想研究n8n工作流自动化的小伙伴们可以加个关注一起学起来。后续也会持续分享n8n自动化工作流各种玩…

mini-program01の系统认识微信小程序开发

一、官方下载并安装 1、下载&#xff08;I选了稳定版&#xff09; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2、安装&#xff08;A FEW MOMENT LATER&#xff09;…

如何将 Java 项目打包为可执行 JAR 文件

如何将 Java 项目打包为可执行 JAR 文件我将详细介绍将 Java 项目打包为可执行 JAR 文件的完整流程&#xff0c;包括使用 IDE 和命令行两种方法。方法一&#xff1a;使用 IntelliJ IDEA 打包步骤 1&#xff1a;配置项目结构打开项目点击 File > Project Structure在 Project…

【Starrocks 异常解决】-- mysql flink sync to starrocks row error

1、异常信息 flink 1.20 starrocks 3.3.0 mysql 8.0 errorLog: Error: Target column count: 35 doesnt match source value column count: 28. Column separator: \t, Row delimiter: \n. Row: 2025-05-22 6 23400055 214 dssd 1 1 1928 mm2er 360 20000.00000000 1…

Jenkins 使用宿主机的Docker

背景&#xff1a;不想在Jenkins 内部安装Docker,想直接使用Jenkins服务所在的系统安装的docker当你在 Jenkins 中执行 docker 命令时&#xff0c;实际上是通过 Docker 客户端与 Docker 守护进程进行通信。Docker 客户端和守护进程之间的通信是通过一个名为 /var/run/docker.soc…

工具+服务双驱动:创客匠人打造中医IP差异化竞争力

一、技术工具场景化定制&#xff1a;中医专业的可视化破圈在中医IP同质化严重的行业现状下&#xff0c;创客匠人以场景化技术工具破解专业传播难题。系统内置的“体质测试”模块可生成个性化调理报告&#xff0c;“案例库”支持前后对比图上传&#xff0c;“直播问诊”自动添加…