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

Vue 组件传参 emit

emit 属性:用于创建自定义事件,接收子组件传递过来的数据。

注意:如果自定义事件的名称,和原生事件的名称一样,那么只会触发自定义事件。

setup 语法糖写法请见:《Vue3 子传父 组件传参 defineEmits》 

语法格式

// 子组件:创建自定义事件,传递数据
emits: ['自定义事件'],
// 组合式 API 使用
setup(props, context) {context.emit("自定义事件", 数据1, 数据2);
},
// 选项式 API 使用
this.$emit("自定义事件", 数据1, 数据2);// 父组件:绑定自定义事件,接收数据
<组件标签 @自定义事件="函数名"></组件标签>
// JS 代码
const 函数名 = (参数1, 参数2) => {console.log(参数1, 参数2);
}

组合式 API 写法

一、子组件:创建自定义事件,传递数据。

 

<template><h3>我是子组件</h3>
</template><script>
import { ref } from "vue";
export default {// 创建自定义事件 myEventemits: ["myEvent"],setup(props, context) {let name = ref("张三");// 使用 myEvent 自定义事件,传递数据context.emit("myEvent", name.value, 999);return {};},
};
</script>

:需要在 setup 函数中接收一个 context 参数,才能在 JS 中使用。

二、父组件:给组件标签绑定自定义事件,接收数据。

<template><h3>我是父组件</h3><p>{{ title }}</p><hr /><!-- 绑定自定义事件 --><Child @myEvent="add"></Child>
</template><script>
import Child from '../components/Child';
import { ref } from 'vue';
export default {components: { Child },setup() {let title = ref();// 接收数据const add = (name, num) => {title.value = name;console.log('我是父组件', name, num);}return { title, add }}
}
</script>

:子组件使用自定义事件后,父组件中的事件函数会自动执行。

三、最终效果。

原创作者:吴小糖

创作时间:2023.12.15 

相关文章:

Vue 组件传参 emit

emit 属性&#xff1a;用于创建自定义事件&#xff0c;接收子组件传递过来的数据。 注意&#xff1a;如果自定义事件的名称&#xff0c;和原生事件的名称一样&#xff0c;那么只会触发自定义事件。 setup 语法糖写法请见&#xff1a;《Vue3 子传父 组件传参 defineEmits》 语…...

Makefile基本指令

语法规则 目标 ... : 依赖 ...命令1命令2. . .1、目标即要生成的文件。如果目标文件的更新时间晚于依赖文件更新时间&#xff0c;则说明依赖文件没有改动&#xff0c;目标文件不需要重新编译。否则会进行重新编译并更新目标文件。 2、默认情况下Makefile的第一个目标为终极目…...

爬取图片python代码

在百度上爬取图片 pic_baidu.py import re import requests from urllib import error from bs4 import BeautifulSoup import os num 0 numPicture 0 file List []def Find(url, A):global Listprint(正在检测图片总数&#xff0c;请稍等.....)t 0i 1s 0while t <…...

Android通过listview实现输入框自定义提示栏(代替AutoCompleteTextView自动完成文本框)

效果图 背景 本人因为一些需求初次接触android&#xff0c;需要实现一个类似android自带的AutoCompleteTextView&#xff08;自动完成文本框&#xff09;&#xff0c;但和其不同的是通过后端接口直接筛选数据&#xff08;自己的分词处理规则&#xff09;&#xff0c;然后返回前…...

DA-AD试验

/********************************************************************************** * * * 1.通过本例程了解并掌握AD-DA转换芯片的基本原理和使用 * * …...

Leetcode—896.单调数列【简单】

2023每日刷题&#xff08;五十九&#xff09; Leetcode—896.单调数列 实现代码 class Solution { public:bool isMonotonic(vector<int>& nums) {int up 0;int down 0;if(nums.size() 1) {return true;}for(int i 0; i < nums.size() - 1; i) {if(nums[i] …...

vue2生命周期

vue2生命周期 在进行组件化项目开发的时候都会存在一个组件的生命周期概念&#xff0c;像Vue、React、小程序等等&#xff0c;无一例外&#xff0c;而通常情况组件的生命周期主要分成三个阶段&#xff0c;包括&#xff1a;创建、更新以及销毁阶段。 Vue的生命周期钩子函数主要包…...

【Flink on k8s】 -- flink kubernetes operator 1.7.0 发布

目录 前言 重大特性 1、自动伸缩 2、版本支持 3、savepoint 触发改进 4、jdk 支持 前言 Flink 官方博客于 2023-11-22 发布了 flink kubernetes operator 1.7.0 发布的消息。这个版本对自动缩放进行了大量的改进&#xff0c;包括与 Kubernetes 的完全分离&#xff0c;以便…...

Java网络编程,对使用UDP实现TCP(一)三次握手实现的补充

修改片段1 在第一次握手时&#xff0c;由《TCP/IP详解》卷二中对tcp计时器的描述中&#xff0c;我们可知连接的建立是需要进行判断&#xff0c;如果客户端发送了SYN连接请求&#xff0c;服务端没有在有限时间内进行恢复&#xff0c;就会取消本次连接。 我们使用 setSoTimeout…...

Redis 的常见使用场景

01 缓存 作为 Key-Value 形态的内存数据库&#xff0c;Redis 最先会被想到的应用场景便是作为数据缓存。而使用 Redis 缓存数据非常简单&#xff0c;只需要通过 string 类型将序列化后的对象存起来即可&#xff0c;不过也有一些需要注意的地方&#xff1a; 必须保证不同对象的…...

VRRP协议详解

目录 一、基础概念 1、概念 2、VRRP的基本结构 状态机 二、VRRP主备备份工作过程 1、备份工作过程 2、VRRP的负载分担工作 三、实验 一、基础概念 1、概念 VRRP能够在不改变组网的情况下&#xff0c;将多台路由器虚拟成一个虚拟路由器&#xff0c;通过配置虚拟路由器的I…...

Linux 常用命令----mktemp 命令

文章目录 基本用法实例演示高级用法注意事项 mktemp 命令用于创建一个临时文件或目录&#xff0c;这在需要处理临时数据或进行安全性测试时非常有用。使用 mktemp 可以保证文件名的唯一性&#xff0c;避免因文件名冲突而导致的问题。 基本用法 创建临时文件: 命令 mktemp 默认…...

基于ssm服装定制系统源码和论文

idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 环境&#xff1a; jdk8 tomcat8.5 开发技术 ssm 基于ssm服装定制系统源码和论文751 1.1项目研究的背景 困扰管理层的许多问题当中,服装定制将是广大用户们不可忽视的一块。但是管理好服装定制又面临很多麻…...

【AI】如何准备mac开发vue项目的环境

为了在Mac上开发Vue项目&#xff0c;你需要准备一些工具和环境。以下是主要的步骤&#xff1a; 安装Node.js和npm&#xff1a; Vue.js是一个基于JavaScript的框架&#xff0c;因此你需要Node.js环境。访问Node.js官网下载并安装Node.js&#xff0c;这也会自动安装npm&#xff0…...

BERT大模型:英语NLP的里程碑

BERT的诞生与重要性 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;大模型标志着自然语言处理&#xff08;NLP&#xff09;领域的一个重要转折点。作为首个利用掩蔽语言模型&#xff08;MLM&#xff09;在英语语言上进行预训练的模型&…...

JVM的类的生命周期

目录 前言 1. 加载&#xff08;Loading&#xff09;&#xff1a; 2. 验证&#xff08;Verification&#xff09;&#xff1a; 3. 准备&#xff08;Preparation&#xff09;&#xff1a; 4. 解析&#xff08;Resolution&#xff09;&#xff1a; 5. 初始化&#xff08;Ini…...

uni-app获取response header响应头(h5/app/小程序三端)

h5、app获取方式&#xff1a;getResponseHeader(key) 示例&#xff1a;参考&#xff1a;HTML5 API Reference // 创建xhr实例&#xff1a; // #ifdef APP-VUE let xhr new plus.net.XMLHttpRequest(); // #endif // #ifdef H5 let xhr new window.XMLHttpRequest(); // #en…...

本地部署语音转文字(whisper,SpeechRecognition)

本地部署语音转文字 1.whisper1.首先安装Chocolatey2.安装3.使用 2.SpeechRecognition1.环境2.中文包3.格式转化4.运行 3.效果 1.whisper 1.首先安装Chocolatey https://github.com/openai/whisper 以管理员身份运行PowerShell Set-ExecutionPolicy Bypass -Scope Process -…...

js new 原理

mdn new new 调用函数时&#xff0c;该函数将被用作构造函数 类只能用 new 运算符实例化 不使用 new 调用一个类将抛出 TypeError。 过程 new Foo(…) 执行时&#xff1a; 创建一个空的简单 JavaScript 对象。 为方便起见&#xff0c;我们称之为 newInstance。 如果构造函数…...

智能优化算法应用:基于黏菌算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于黏菌算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于黏菌算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.黏菌算法4.实验参数设定5.算法结果6.参考文献7.MA…...

CentOS7系统维护终止后YUM源失效的解决方案

1. CentOS7维护终止带来的YUM源危机 去年夏天我给客户部署的CentOS7服务器突然无法安装新软件&#xff0c;屏幕上不断弹出"无法解析主机"的错误。这才意识到官方已经停止维护&#xff0c;默认的YUM源就像突然关门的超市&#xff0c;所有货架都空了。对于仍在使用Cent…...

保姆级教程:手把手教你用LIN诊断协议传输超过5字节的数据(附多帧传输实战代码)

突破LIN诊断协议5字节限制&#xff1a;多帧传输实战指南 在汽车电子开发中&#xff0c;LIN总线因其低成本、高可靠性的特点&#xff0c;被广泛应用于车身控制、传感器网络等场景。但LIN协议的单帧5字节数据限制&#xff0c;常常成为开发者面临的技术瓶颈——无论是ECU固件升级还…...

OpenClaw备份策略详解:百川2-13B模型自动化容灾方案

OpenClaw备份策略详解&#xff1a;百川2-13B模型自动化容灾方案 1. 为什么需要自动化备份策略 去年冬天我经历过一次惨痛的教训——硬盘突然损坏导致三个月积累的模型微调数据全部丢失。那次事件后&#xff0c;我开始系统性地研究如何为本地部署的百川2-13B模型构建自动化备份…...

从论文到代码:手把手复现OpenPose手部检测(CMU开源模型),并教你用MediaPipe做个对比测试

从论文到实践&#xff1a;OpenPose与MediaPipe手部关键点检测深度评测 在计算机视觉领域&#xff0c;手部关键点检测技术正逐渐成为人机交互、增强现实和虚拟现实应用的核心组件。不同于面部或全身姿态估计&#xff0c;手部检测需要处理更精细的动作和更复杂的遮挡情况。本文将…...

CM1数值模拟新手避坑指南:从namelist.input配置到并行计算实战

CM1数值模拟新手避坑指南&#xff1a;从namelist.input配置到并行计算实战 刚接触CM1模式的研究人员常常会在配置文件和并行计算环节踩坑——某个参数设置不当可能导致数小时的计算结果突然崩溃&#xff0c;或是并行效率低下浪费计算资源。本文将用真实案例拆解那些文档里没写…...

FPGA加速二值化CNN:从MNIST手写识别到硬件优化实践

1. 二值化神经网络与FPGA加速基础 二值化神经网络&#xff08;BNN&#xff09;是近年来边缘计算领域的重要突破&#xff0c;它将传统神经网络中的32位浮点权重和激活值压缩到仅用1位表示&#xff08;1或-1&#xff09;。这种极端量化带来的直接好处是存储需求降低32倍&#xff…...

电视盒变身记:3步打造你的家庭全能服务器,闲置设备重获新生!

电视盒变身记&#xff1a;3步打造你的家庭全能服务器&#xff0c;闲置设备重获新生&#xff01; 【免费下载链接】amlogic-s9xxx-armbian amlogic-s9xxx-armbian: 该项目提供了为Amlogic、Rockchip和Allwinner盒子构建的Armbian系统镜像&#xff0c;支持多种设备&#xff0c;允…...

.NETCore Serilog 代码设置相关参数说明及按Sink设置不同级别(不同日志级别),使用异步方式写日志

rollingInterval设置为RollingInterval.Day与fileSizeLimitBytes配合使用&#xff1a; 在.NET Core Serilog中&#xff0c;同时设置rollingInterval RollingInterval.Day和fileSizeLimitBytes参数并不会产生配置冲突。这两个参数实际上是互补的&#xff0c;共同提供了更灵活的…...

NcmpGui:解锁网易云音乐NCM格式的终极桌面解决方案

NcmpGui&#xff1a;解锁网易云音乐NCM格式的终极桌面解决方案 【免费下载链接】ncmppGui 一个使用C编写的转换ncm文件的GUI工具 项目地址: https://gitcode.com/gh_mirrors/nc/ncmppGui 你是否曾因网易云音乐的NCM格式文件无法在其他播放器上正常播放而感到困扰&#x…...

nli-distilroberta-base效果展示:Entailment/Contradiction/Neutral三类判别置信度热力图

nli-distilroberta-base效果展示&#xff1a;Entailment/Contradiction/Neutral三类判别置信度热力图 1. 项目概述 nli-distilroberta-base是基于DistilRoBERTa模型的自然语言推理(NLI)Web服务&#xff0c;专门用于分析两个句子之间的逻辑关系。这个轻量级模型能够快速准确地…...