当前位置: 首页 > 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…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

安宝特方案丨从依赖经验到数据驱动:AR套件重构特种装备装配与质检全流程

在高压电气装备、军工装备、石油测井仪器装备、计算存储服务器和机柜、核磁医疗装备、大型发动机组等特种装备生产型企业&#xff0c;其产品具有“小批量、多品种、人工装配、价值高”的特点。 生产管理中存在传统SOP文件内容缺失、SOP更新不及、装配严重依赖个人经验、产品装…...

河北对口计算机高考MySQL笔记(完结版)(2026高考)持续更新~~~~

MySQL 基础概念 数据&#xff08;Data&#xff09;&#xff1a;文本&#xff0c;数字&#xff0c;图片&#xff0c;视频&#xff0c;音频等多种表现形式&#xff0c;能够被计算机存储和处理。 **数据库&#xff08;Data Base—简称DB&#xff09;&#xff1a;**存储数据的仓库…...