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 属性:用于创建自定义事件,接收子组件传递过来的数据。 注意:如果自定义事件的名称,和原生事件的名称一样,那么只会触发自定义事件。 setup 语法糖写法请见:《Vue3 子传父 组件传参 defineEmits》 语…...
Makefile基本指令
语法规则 目标 ... : 依赖 ...命令1命令2. . .1、目标即要生成的文件。如果目标文件的更新时间晚于依赖文件更新时间,则说明依赖文件没有改动,目标文件不需要重新编译。否则会进行重新编译并更新目标文件。 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(正在检测图片总数,请稍等.....)t 0i 1s 0while t <…...
Android通过listview实现输入框自定义提示栏(代替AutoCompleteTextView自动完成文本框)
效果图 背景 本人因为一些需求初次接触android,需要实现一个类似android自带的AutoCompleteTextView(自动完成文本框),但和其不同的是通过后端接口直接筛选数据(自己的分词处理规则),然后返回前…...
DA-AD试验
/********************************************************************************** * * * 1.通过本例程了解并掌握AD-DA转换芯片的基本原理和使用 * * …...
Leetcode—896.单调数列【简单】
2023每日刷题(五十九) 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生命周期 在进行组件化项目开发的时候都会存在一个组件的生命周期概念,像Vue、React、小程序等等,无一例外,而通常情况组件的生命周期主要分成三个阶段,包括:创建、更新以及销毁阶段。 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 发布的消息。这个版本对自动缩放进行了大量的改进,包括与 Kubernetes 的完全分离,以便…...
Java网络编程,对使用UDP实现TCP(一)三次握手实现的补充
修改片段1 在第一次握手时,由《TCP/IP详解》卷二中对tcp计时器的描述中,我们可知连接的建立是需要进行判断,如果客户端发送了SYN连接请求,服务端没有在有限时间内进行恢复,就会取消本次连接。 我们使用 setSoTimeout…...
Redis 的常见使用场景
01 缓存 作为 Key-Value 形态的内存数据库,Redis 最先会被想到的应用场景便是作为数据缓存。而使用 Redis 缓存数据非常简单,只需要通过 string 类型将序列化后的对象存起来即可,不过也有一些需要注意的地方: 必须保证不同对象的…...
VRRP协议详解
目录 一、基础概念 1、概念 2、VRRP的基本结构 状态机 二、VRRP主备备份工作过程 1、备份工作过程 2、VRRP的负载分担工作 三、实验 一、基础概念 1、概念 VRRP能够在不改变组网的情况下,将多台路由器虚拟成一个虚拟路由器,通过配置虚拟路由器的I…...
Linux 常用命令----mktemp 命令
文章目录 基本用法实例演示高级用法注意事项 mktemp 命令用于创建一个临时文件或目录,这在需要处理临时数据或进行安全性测试时非常有用。使用 mktemp 可以保证文件名的唯一性,避免因文件名冲突而导致的问题。 基本用法 创建临时文件: 命令 mktemp 默认…...
基于ssm服装定制系统源码和论文
idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 环境: jdk8 tomcat8.5 开发技术 ssm 基于ssm服装定制系统源码和论文751 1.1项目研究的背景 困扰管理层的许多问题当中,服装定制将是广大用户们不可忽视的一块。但是管理好服装定制又面临很多麻…...
【AI】如何准备mac开发vue项目的环境
为了在Mac上开发Vue项目,你需要准备一些工具和环境。以下是主要的步骤: 安装Node.js和npm: Vue.js是一个基于JavaScript的框架,因此你需要Node.js环境。访问Node.js官网下载并安装Node.js,这也会自动安装npm࿰…...
BERT大模型:英语NLP的里程碑
BERT的诞生与重要性 BERT(Bidirectional Encoder Representations from Transformers)大模型标志着自然语言处理(NLP)领域的一个重要转折点。作为首个利用掩蔽语言模型(MLM)在英语语言上进行预训练的模型&…...
JVM的类的生命周期
目录 前言 1. 加载(Loading): 2. 验证(Verification): 3. 准备(Preparation): 4. 解析(Resolution): 5. 初始化(Ini…...
uni-app获取response header响应头(h5/app/小程序三端)
h5、app获取方式:getResponseHeader(key) 示例:参考:HTML5 API Reference // 创建xhr实例: // #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 调用函数时,该函数将被用作构造函数 类只能用 new 运算符实例化 不使用 new 调用一个类将抛出 TypeError。 过程 new Foo(…) 执行时: 创建一个空的简单 JavaScript 对象。 为方便起见,我们称之为 newInstance。 如果构造函数…...
智能优化算法应用:基于黏菌算法3D无线传感器网络(WSN)覆盖优化 - 附代码
智能优化算法应用:基于黏菌算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于黏菌算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.黏菌算法4.实验参数设定5.算法结果6.参考文献7.MA…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...
elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
