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

Vue3自定义事件

   自定义事件是一种组件间通信的方式,它允许子组件向父组件发送信息。

子组件可以通过自定义事件向父组件传递数据以及事件,当自定义事件触发时,子组件可以借此将子组件的数据传递给父组件并使父组件对此做出相应的操作。

1.声明自定义事件

使用defineEmits()宏声明组件要发生的事件(事件名自己取),defineEmits() 的返回值是一个 ref
下面的代码为组件声明了事件 myEvent

const emit = defineEmits(['myEvent'])
2.触发与监听事件
2.1 事件触发

自定义事件可以在 template 部分中使用 $emit和在 setup 部分中使用 defineEmits() 的返回值触发。
下面例子使用按钮点击事件触发自定义事件。
template中触发:

<template><button @click="$emit('myEvent')">点我</button>
</template>

setup中触发:

<template><button @click="handleClick">点我</button>
</template><script setup>const emit = defineEmits(['myEvent'])const handleClick = () => {emit('myEvent')
}</script>
2.2 事件监听

父组件在使用子组件时,在子组件上监听自定义事件并采取相关操作。

<template><Child@my-event="handleMyEvent"></Child>
</template><script setup>
import Child from '@/components/TestChild/index.vue'const handleMyEvent = () => {console.log('555')
}</script><style lang='scss' scoped></style>
3.事件参数

有时候,我们需要在事件触发时传递特定的值。这时可以给 $emit 提供而外的参数。
下面代码中,当事件触发时,子组件向父组件传递一个参数:

<template><button @click="$emit('myEvent',10)">点我</button>
</template><script setup>const emit = defineEmits(['myEvent'])</script><style lang='scss' scoped></style>

父组件可以使用一个内联的箭头函数或组件函数方法监听事件,两种方式都可以接收到参数。
箭头函数:

<template><p>{{ num }}</p><Child@my-event="(n) => num += n"></Child>
</template><script setup>
import { ref } from 'vue';
import Child from '@/components/TestChild/index.vue'const num = ref(0)</script><style lang='scss' scoped></style>

组件函数:

<template><p>{{ num }}</p><Child@my-event="handleMyEvent"></Child>
</template><script setup>
import { ref } from 'vue';
import Child from '@/components/TestChild/index.vue'const num = ref(0)const handleMyEvent = (n) => {num.value += n
}</script><style lang='scss' scoped></style>

相关文章:

Vue3自定义事件

自定义事件是一种组件间通信的方式&#xff0c;它允许子组件向父组件发送信息。子组件可以通过自定义事件向父组件传递数据以及事件&#xff0c;当自定义事件触发时&#xff0c;子组件可以借此将子组件的数据传递给父组件并使父组件对此做出相应的操作。 1.声明自定义事件 使…...

BeautifulSoup 与 XPath 用法详解与对比

BeautifulSoup&#xff08;bs4&#xff09; 和 XPath 是学习python爬虫过程中常常用到的库&#xff0c;本文将详细介绍它们的功能、使用方法、优缺点以及实际应用中的区别和选择建议。 1. BeautifulSoup 用法详解 1.1 什么是 BeautifulSoup&#xff1f; BeautifulSoup 是 Pyt…...

Emacs 折腾日记(五)——elisp 数字类型

本文是参考 emacs lisp 简明教程 写的&#xff0c;很多东西都是照搬里面的内容&#xff0c;如果各位读者觉得本文没有这篇教程优秀或者有抄袭嫌疑、又或者觉得我更新比较慢、再或者其他什么原因&#xff0c;请直接阅读上述链接中的教程。 上一篇我们讲了elisp中的流程控制结构相…...

重拾设计模式--外观模式

文章目录 外观模式&#xff08;Facade Pattern&#xff09;概述定义 外观模式UML图作用 外观模式的结构C 代码示例1C代码示例2总结 外观模式&#xff08;Facade Pattern&#xff09;概述 定义 外观模式是一种结构型设计模式&#xff0c;它为子系统中的一组接口提供了一个统一…...

源码编译llama.cpp for android

源码编译llama.cpp for android 我这有已经编译好的版本&#xff0c;直接下载使用&#xff1a; https://github.com/turingevo/llama.cpp-build/releases/tag/b4331 准备 android-ndk 已下载&#xff1a; /media/wmx/ws1/software/qtAndroid/Sdk/ndk/23.1.7779620版本 &am…...

StarRocks 排查单副本表

文章目录 StarRocks 排查单副本表方式1 查询元数据&#xff0c;检查分区级的副本数方式2 SHOW PARTITIONS命令查看 ReplicationNum修改副本数命令 StarRocks 排查单副本表 方式1 查询元数据&#xff0c;检查分区级的副本数 # 方式一 查询元数据&#xff0c;检查分区级的副本数…...

Windows11 家庭版安装配置 Docker

1. 安装WSL WSL 是什么&#xff1a; WSL 是一个在 Windows 上运行 Linux 环境的轻量级工具&#xff0c;它可以让用户在 Windows 系统中运行 Linux 工具和应用程序。Docker 为什么需要 WSL&#xff1a; Docker 依赖 Linux 内核功能&#xff0c;WSL 2 提供了一个高性能、轻量级的…...

线程知识总结(二)

本篇文章以线程同步的相关内容为主。线程的同步机制主要用来解决线程安全问题&#xff0c;主要方式有同步代码块、同步方法等。首先来了解何为线程安全问题。 1、线程安全问题 卖票示例&#xff0c;4 个窗口卖 100 张票&#xff1a; class Ticket implements Runnable {priv…...

解决vscode ssh远程连接服务器一直卡在下载 vscode server问题

目录 方法1&#xff1a;使用科学上网 方法2&#xff1a;手动下载 方法3 在使用vscode使用ssh远程连接服务器时&#xff0c;一直卡在下载"vscode 服务器"阶段&#xff0c;但MobaXterm可以正常连接服务器&#xff0c;大概率是网络问题&#xff0c;解决方法如下: 方…...

【Cadence射频仿真学习笔记】IC设计中电感的分析、建模与绘制(EMX电磁仿真,RFIC-GPT生成无源器件及与cadence的交互)

一、理论讲解 1. 电感设计的两个角度 电感的设计可以从两个角度考虑&#xff0c;一个是外部特性&#xff0c;一个是内部特性。外部特性就是把电感视为一个黑盒子&#xff0c;带有两个端子&#xff0c;如果带有抽头的电感就有三个端子&#xff0c;需要去考虑其电感值、Q值和自…...

Definition of Done

Definition of Done English Version The team agrees on, a checklist of criteria which must be met before a product increment “often a user story” is considered “done”. Failure to meet these criteria at the end of a sprint normally implies that the work …...

【漏洞复现】CVE-2023-37461 Arbitrary File Writing

漏洞信息 NVD - cve-2023-37461 Metersphere is an opensource testing framework. Files uploaded to Metersphere may define a belongType value with a relative path like ../../../../ which may cause metersphere to attempt to overwrite an existing file in the d…...

简单工厂模式和策略模式的异同

文章目录 简单工厂模式和策略模式的异同相同点&#xff1a;不同点&#xff1a;目的&#xff1a;结构&#xff1a; C 代码示例简单工厂模式示例&#xff08;以创建图形对象为例&#xff09;策略模式示例&#xff08;以计算价格折扣策略为例&#xff09;UML区别 简单工厂模式和策…...

HuggingFace datasets - 下载数据

文章目录 下载数据修改默认保存地址 TRANSFORMERS_CACHE保存到本地 & 本地加载保存加载 读取 .arrow 数据 下载数据 1、Python 代码下载 from datasets import load_dataset imdb load_dataset("imdb") # name参数为full或mini&#xff0c;full表示下载全部数…...

梯度(Gradient)和 雅各比矩阵(Jacobian Matrix)的区别和联系:中英双语

雅各比矩阵与梯度&#xff1a;区别与联系 在数学与机器学习中&#xff0c;梯度&#xff08;Gradient&#xff09; 和 雅各比矩阵&#xff08;Jacobian Matrix&#xff09; 是两个核心概念。虽然它们都描述了函数的变化率&#xff0c;但应用场景和具体形式有所不同。本文将通过…...

Vscode搭建C语言多文件开发环境

一、文章内容简介 本文介绍了 “Vscode搭建C语言多文件开发环境”需要用到的软件&#xff0c;以及vscode必备插件&#xff0c;最后多文件编译时tasks.json文件和launch.json文件的配置。即目录顺序。由于内容较多&#xff0c;建议大家在阅读时使用电脑阅读&#xff0c;按照目录…...

自定义 C++ 编译器的调用与管理

在 C 项目中&#xff0c;常常需要自动化地管理编译流程&#xff0c;例如使用 MinGW 或 Visual Studio 编译器进行代码的编译和链接。为了方便管理不同编译器和简化编译流程&#xff0c;我们开发了一个 CompilerManager 类&#xff0c;用于抽象编译器的查找、命令生成以及执行。…...

时间管理系统|Java|SSM|JSP|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…...

用SparkSQL和PySpark完成按时间字段顺序将字符串字段中的值组合在一起分组显示

用SparkSQL和PySpark完成以下数据转换。 源数据&#xff1a; userid,page_name,visit_time 1,A,2021-2-1 2,B,2024-1-1 1,C,2020-5-4 2,D,2028-9-1 目的数据&#xff1a; user_id,page_name_path 1,C->A 2,B->D PySpark&#xff1a; from pyspark.sql import SparkSes…...

Sentinel 学习笔记3-责任链与工作流程

本文属于sentinel学习笔记系列。网上看到吴就业老师的专栏&#xff0c;原文地址如下&#xff1a; https://blog.csdn.net/baidu_28523317/category_10400605.html 上一篇梳理了概念与核心类&#xff1a;Sentinel 学习笔记2- 概念与核心类介绍-CSDN博客 补一个点&#xff1a;…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...