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迁…...
企业级流程建模前端架构:基于Vite+Vue3的低代码解决方案
企业级流程建模前端架构:基于ViteVue3的低代码解决方案 【免费下载链接】vite-vue-bpmn-process 基于 Vite TypeScript Vue3 NaiveUI Bpmn.js 的流程编辑器(前端部分)。支持高度自定义🚀🚀🚀。Vue 2 版本…...
Windows 11优化终极指南:一键清理预装软件与提升系统性能
Windows 11优化终极指南:一键清理预装软件与提升系统性能 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本,用于从Windows中移除预装的无用软件,禁用遥测,从Windows搜索中移除Bing,以及执行各种其他更改以简化…...
FedMeta: Accelerating Federated Learning with Meta-Learning for Enhanced Privacy and Efficiency
1. FedMeta:当联邦学习遇上元学习 想象一下,你正在训练一个能识别手写数字的AI模型,但数据分散在成千上万个用户的手机里。传统联邦学习就像让每个用户都从头开始训练完整模型,既耗流量又费时间。而FedMeta的聪明之处在于——它让…...
AI赋能React开发:让快马智能助手帮你设计和优化复杂组件逻辑
AI赋能React开发:让快马智能助手帮你设计和优化复杂组件逻辑 最近在开发一个电商网站时,遇到了一个常见的需求:实现一个侧边栏商品筛选组件。这个组件需要包含价格区间滑块、多品牌复选框和分类下拉选择三个主要功能。刚开始觉得这个需求挺简…...
【Python多解释器隔离终极指南】:20年CTO亲授GIL绕过术、内存隔离与并发安全实战(附可运行代码库)
第一章:Python多解释器隔离的核心概念与演进脉络Python长期以来以全局解释器锁(GIL)为标志性设计,单进程内仅能存在一个活跃的CPython解释器状态(PyInterpreterState),这使得“多解释器”长期处…...
LeetDown完全指南:系统降级功能解决A6/A7设备用户的卡顿痛点
LeetDown完全指南:系统降级功能解决A6/A7设备用户的卡顿痛点 【免费下载链接】LeetDown a GUI macOS Downgrade Tool for A6 and A7 iDevices 项目地址: https://gitcode.com/gh_mirrors/le/LeetDown LeetDown是一款专为macOS设计的图形化降级工具࿰…...
多模态扩展实验:OpenClaw+Qwen3-32B处理图片描述生成
多模态扩展实验:OpenClawQwen3-32B处理图片描述生成 1. 实验背景与动机 最近在探索如何将OpenClaw的自动化能力扩展到视觉领域。作为一个长期依赖文本交互的框架,OpenClaw能否结合多模态大模型处理图像任务?这引发了我的兴趣。恰好手头有台…...
OpenClaw+Qwen3-32B低成本方案:RTX4090D镜像长任务稳定性实测
OpenClawQwen3-32B低成本方案:RTX4090D镜像长任务稳定性实测 1. 为什么需要测试长任务稳定性? 上周我遇到一个头疼的问题:用OpenClaw整理3年积累的摄影素材时,任务执行到2小时突然中断。检查日志发现是显存溢出导致模型服务崩溃…...
CentOS 7下OnlyOffice离线部署全攻略:从依赖包下载到一键配置(避坑指南)
CentOS 7下OnlyOffice离线部署全攻略:从依赖包下载到一键配置(避坑指南) 在企业内网或安全隔离环境中部署文档协作平台时,OnlyOffice凭借其开源特性和丰富的编辑功能成为首选方案。本文将深入探讨如何在CentOS 7系统中实现完全离线…...
LFM2.5-1.2B-Thinking-GGUF代码生成能力评测:对比Claude Code的轻量化替代方案
LFM2.5-1.2B-Thinking-GGUF代码生成能力评测:对比Claude Code的轻量化替代方案 1. 评测背景与模型特点 在当今AI辅助编程领域,大型语言模型已经成为开发者日常工作的得力助手。然而,许多高性能模型往往需要云端部署或强大的计算资源&#x…...
