vue 子组件 emit传递事件和事件数据给父组件
1 子组件通过emit 函数 传递事件名'init-complete 和 数据dateRange
this.$emit('init-complete', dateRange)
2 父组件 创建方法 接收数据
handleInitComplete(dateRange) {}
3 父组件 创建的方法 和 子组件事件绑定
<component :is="currentComponent" :passObj="passObj" ref="component" @init-complete="handleInitComplete"></component>
4 完整代码
4.1 子组件
<template><div class="child-component"><!--子组件的内容--></div>
</template><script>
export default {data() {return {dateRange: {} // 存储子组件发送给父组件的数据}},mounted() {// 将子组件的数据通过emit函数发送给父组件this.$emit('init-complete', this.dateRange)}
}
</script>
4.2 父组件
<template><div class="parent-component"><!--父组件的内容--><child-component :passObj="passObj" @init-complete="handleInitComplete"></child-component></div>
</template><script>
import ChildComponent from '@/components/ChildComponent.vue'export default {components: {ChildComponent},data() {return {passObj: {} // 存储要传递给子组件的数据}},methods: {handleInitComplete(dateRange) {// 处理从子组件传递过来的数据console.log(dateRange)// 进一步处理数据}}
}
</script>
ps: 不能传递list 类型
相关文章:
vue 子组件 emit传递事件和事件数据给父组件
1 子组件通过emit 函数 传递事件名init-complete 和 数据dateRange this.$emit(init-complete, dateRange) 2 父组件 创建方法 接收数据 handleInitComplete(dateRange) {} 3 父组件 创建的方法 和 子组件事件绑定 <component :is"currentComponent" :passOb…...
Zenity 简介
什么使 Zenity Zenity 是一个开源的命令行工具,它提供了一种简单的方式来创建图形化的用户界面(GUI)对话框,以与用户进行交互。它基于 GTK 库,可以在 Linux 和其他 UNIX-like 系统上使用。 Zenity 可以通过命令行或脚…...
c# 数组反转
一个数组是{1,2,3,4,5,6},把它变成{6,5,4,3,2,1} 1.创建一个和原数组长度类型一样的数组来接收反转的数据 private static void Main(string[] a…...
CSS学习笔记01
CSS笔记01 什么是CSS CSS(Cascading Style Sheets ):层叠样式表,也可以叫做级联样式表,是一种用来表现 HTML 或 XML 等文件样式的计算机语言。字体,颜色,边距,高度,宽度…...
数据结构,队列,顺序表队列,链表队列
队列是一种常见的数据结构,它具有先进先出(First-In-First-Out,FIFO)的特性,类似于排队等候的场景。以下是队列的要点: 1. 定义:队列是一种线性数据结构,由一系列元素组成ÿ…...
Webgl利用缓冲区绘制三角形
什么是attribute 变量 它是一种存储限定符,表示定义一个attribute的全局变量,这种变量的数据将由外部向顶点着色器内传输,并保存顶点相关的数据,只有顶点着色器才能使用它 <!DOCTYPE html> <html lang"en"&g…...
正则表达式应用
正则表达式应用 正则匹配以{开头,以}结尾 \{.*?\}正则匹配以[开头,以]结尾 \[.*?\]校验数字的表达式 数字:^[0-9]*$n位的数字:^\d{n}$至少n位的数字:^\d{n,}$m-n位的数字:^\d{m,n}$零和非零开头的数字…...
9.4 【C语言】用指针处理链表
9.4.1 什么是链表 它是动态地进行存储分配的一种结构。 链表中各元素在内存中的地址是不连续的。要找某一元素,必须先找到上一个元素,根据它提供的下一元素地址才能找到下一个元素。 如果不提供“头指针”,则整个链表无法访问。 9.4.2 建…...
后端面试话术集锦第四篇:rabbitmq面试话术
🚗后端面试集锦目录 💖后端面试话术集锦第一篇:spring面试话术💖 💖后端面试话术集锦第二篇:spring boot面试话术💖 💖后端面试话术集锦第三篇:spring cloud面试话术💖 💖后端面试话术集锦第四篇:ElasticSearch面试话术💖 💖后端面试话术集锦第五篇:r…...
Linux目录结构与文件管理(01) (三)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、Linux 系统的组成 二、目录结构 根目录 三、文件管理 目录管理 总结 前言 今天主要学习了Linux的目录结构,主要是一些命令的含义和用法&am…...
OpenCV为老照片,黑白照片增加色彩
Colorful Image Colorization 图片的颜色上色,主要使用到了CNN卷积神经网络,作者在ImageNet数据集上进行了大量的训练,并将此问题使用在分类任务中,以解决问题的潜在的不确定性,并在训练时使用颜色重新平衡的损失函数方…...
HTML之VSCode简单配置与创建
目录 插件下载 然后输入源码: 使用 效果 插件下载 下载这个插件后可以直接运行: 然后创建一个文件: 然后输入源码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…...
2023亿发一体化新零售POS收银解决方案,打造连锁门店经营新未来
在零售业不断演变的今天,门店形态繁多,收银环节的共通性与差异性并存。传统的通用解决方案已不适应多样化的业态需求,而在线上线下一体化的时代背景下,全渠道经营能力也成为商家的迫切需求。 一体化新零售POS收银系统,…...
Android ---使用Jenkins 打包release版本不能安装或者安装后不显示APP
大家在用 Jenkins的时候,是不是会觉得很爽,因为他在用的过程中,是无脑的,毕竟一键触发!!!! 这边记录一个昨天,今天遇到的一个坑货问题,别人提交了所有代码&am…...
【Spring】什么是 AOP(面向切面编程) ? 为什么要有 AOP ? 如何实现 Spring AOP ?
文章目录 前言一、什么是 AOP ?二、为什么要使用 AOP ?三、 AOP 的组成四、Spring AOP 的实现1, 添加依赖2, 定义切面3, 定义切点4, 定义通知5, 创建连接点 总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: 📕 JavaSE基础: 基础语法…...
11.并发:自旋锁
原子操作和自旋锁的区别 相同点都是保护共享资源。 不同点在于: 原子操作简单易用,但只能做计数操作,保护的东西太少。 自旋锁主要用于多核处理器。短时期的轻量级加锁,加锁失败时原地打转、忙等待。避免了上下文调度和系统开销较…...
使用EF Core更新与修改生产数据库
使用EF Core的Code First,在设计阶段,直接使用Database.EnsureCreated()和EnsureDeleted()可以快速删除、更新最新的数据结构。由于没有什么数据,删除的风险非常低。但是对于已经投入生产的数据库,这个方法就绝对不可行了。 考虑…...
法律小程序开发:让法律咨询更便捷
在现代社会,法律咨询服务越来越受到人们的重视和需求。为了方便用户预约法律咨询,很多律所都开始使用小程序来提供在线预约服务。那么,如何制作一款律所预约小程序呢? 首先,我们可以选择乔拓云网作为制作小程序的平台。…...
【C++多线程】C++11互斥锁和条件变量实现生产者消费者模型
先看几个问题,第三个问题可以先看代码然后再理解 Q1:临界区在哪 A1: 队列中元素在「生产者生产(push)」和「消费者消费(pop)」时就是临界区 Q2:同步操作在哪 A2: 很显然,队列只有…...
Webpack迁移Vite采坑指南
前言 本文不介绍什么是webpack、什么是vite,也不分析为什么要迁移。如果你想从webpack迁移到vite,你可能会遇到一些坑,这里我会尽量详细地介绍每一种可能遇到的坑以及解决办法。 老规矩,先说AI的评价:这篇从webpack迁…...
PMOD接口概述
简介 PMOD接口外设模块特点:低频,少量IO引脚。 两种物理规格:6针接口(4IO, 1VCC, 1GND)、12针接口(8IO, 2VCC, 2GND)。 支持的接口协议:SPI、I2C、UART、I2C、H桥、GPIO。 外设模块与主机连接方式:模块直连主机、通过6Pin或12Pin线缆或者12Pin转双6Pin分叉线缆。 外设…...
别再死记硬背了!用Kahn算法搞定LeetCode 207课程表,保姆级C++代码逐行解析
从课程表到任务调度:Kahn算法在LeetCode 207中的实战应用 每次打开LeetCode看到那道课程表问题,你是不是也感到一阵头疼?先修课程、依赖关系、环状检测……这些概念堆在一起,简直比大学选课系统还让人崩溃。但别担心,今…...
【GitHub 加速计划】:解决智能家居插件获取难题的网络适配方案
【GitHub 加速计划】:解决智能家居插件获取难题的网络适配方案 【免费下载链接】integration 项目地址: https://gitcode.com/gh_mirrors/int/integration 在智能家居系统搭建过程中,插件获取往往是用户面临的首要障碍。许多优质的智能家居插件托…...
Pixel Fashion Atelier惊艳案例:‘赛博神社’主题皮装在明亮城镇UI下的生成
Pixel Fashion Atelier惊艳案例:‘赛博神社’主题皮装在明亮城镇UI下的生成 1. 项目概览 Pixel Fashion Atelier(像素时装锻造坊)是一款基于Stable Diffusion与Anything-v5的图像生成工作站。与传统AI工具不同,它采用了复古日系…...
零基础入门:用eNSP搭建USG5500防火墙IPsec虚拟专用网实验环境
从零构建企业级安全隧道:eNSP模拟USG5500防火墙IPsec实战指南 当你第一次听说"IPsec"这个词时,可能会联想到那些科技电影中黑客们建立的加密通道。实际上,IPsec技术离我们并不遥远——它正默默保护着每天数以亿计的企业数据传输。本…...
2026年03月26日全球AI前沿动态
一句话总结全球AI领域密集发布技术、产品、企业动态,覆盖通用/垂直大模型、专项技术、智能体、机器人、硬件基建等全赛道,中国AI在视频、音乐、办公智能体领域领跑,OpenAI关停Sora战略转型,Arm、苹果、腾讯等大厂新品落地…...
医学图像分类实战:基于kvasir v2胃病数据集的深度卷积网络性能对比
1. 医学图像分类与KVASIR V2数据集简介 胃镜图像分类是计算机辅助诊断系统中的关键环节。KVASIR V2作为目前最全面的公开胃病数据集,包含8类常见胃部病变的8000张高清图像,每类1000张。这些图像由专业胃肠病专家标注,覆盖了从正常黏膜到早期…...
【Python AI 工具实战宝典】:20个高复用AI用例+开箱即用代码模板,限时开源库清单泄露!
第一章:Python AI 工具生态全景与实战价值定位Python 已成为人工智能开发的事实标准语言,其核心优势不在于单一库的性能,而在于高度协同、分层清晰的工具生态体系。从底层计算(NumPy、CuPy)、模型构建(PyTo…...
网络安全学习攻略宝典,从菜鸟到高手的必由之路
想成为一名真正的黑客到底该怎么学? 从0开始又该从何学起呢? 很多人想学习网络安全,却不知道从何下手。别迷茫,这篇文章为你指明方向,无论你是零基础小白,还是有一定基础想提升的人,都能从中找…...
从Python转C++必看:C++20的starts_with/ends_with和Python有何不同?5个易错点详解
从Python转C必看:C20的starts_with/ends_with和Python有何不同?5个易错点详解 当你在Python中熟练使用startswith()和endswith()多年后,突然切换到C20的starts_with和ends_with,可能会觉得"这不就是换个语法吗?&q…...
