Vue组件自定义事件实现子组件给父组件传递数据

news2024/9/23 3:28:55

一、绑定自定义事件

(一)使用v-on或@绑定事件

事件是绑定在组件身上的,当我们触发这个事件的时候,就会执行事件回调函数。

<组件标签 v-on:事件名="事件回调函数"/>    // 或

<组件标签 @事件名="事件回调函数">

例如:我们想在Students组件身上绑定一个自定义事件,当这个自定事件被触发的时候,就把Students组件中的名称传到其父组件身上。

(二)使用$on进行绑定

使用$on之前需要先对元素使用ref进行标识,在mounted函数中对事件进行绑定。

this.$refs.标识名.$on("事件名", 事件回调函数);

使用这种方法能够更加灵活地处理绑定事件的需求,比如添加个计时器啥的...

(三)$once和.once

如果只想事件触发一次,对于上面两种不同的写法有不同的方式:

使用v-on或@绑定事件就直接加上.once:

使用$on进行绑定的话就要改成$once:

二、触发自定义事件

我们触发事件是在绑定事件的组件身上触发事件。

option是参数

this.$emit("事件名称", option)

 如果我们遇到传递过来的参数的情况下,可以使用拓展运算符将其他数据整合为一个数组

三、解绑自定义事件

我们给哪个组件绑定的自定义事件,我们就要在哪个组件中给哪个自定义事件解绑。

(一)解绑一个自定义事件

this.$off("事件名");

(二)解绑多个自定义事件

this.$off(["事件名1", "事件名2"]); 

 (三)解绑所有自定义事件

this.$off()

 四、.native触发原生事件

如果我们给组件绑定原生事件,如@click,Vue识别出来仍然是自定义事件,需要通过$emit触发。

如果我们想让Vue将这个事件作为原生事件去处理,就要使用.native修饰符:

<组件标签 @原生事件.native="事件回调">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1143952.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文心一言 VS 讯飞星火 VS chatgpt (122)-- 算法导论10.4 3题

三、用go语言&#xff0c;给定一个n结点的二叉树&#xff0c;写出一个 O(n)时间的非递归过程&#xff0c;将该树每个结点的关键字输出。可以使用一个栈作为辅助数据结构。 文心一言&#xff1a; 以下是一个使用 Go 语言编写的函数&#xff0c;该函数使用一个栈作为辅助数据结…

Web应用系统设计

Web应用设计的本质目的是为了解决软件系统的复杂性,所以我们在进行web设计时,首先要分析系统的复杂性,然后再进行设计。 1.案例 某公司在创业初期快速地开发了一个B2C的垂直电商网站,然后就迅速的投向市场进行运营。为了能够快速上线,系统设计得非常简单,选择了三层架构…

大厂面试题-Java并发编程基础篇(一)

目录 一、什么是守护线程&#xff0c;它有什么特点 二、谈谈你对AQS的理解 三、AbstractQueuedSynchronized为什么采用双向链表 四、lock和synchronized区别 五、线程池如何知道一个线程的任务已经执行完成 六、什么叫做阻塞队列的有界和无界 七、ConcurrentHashMap底层…

拓扑排序基础详解,附有练习题

介绍 拓扑排序是一种对有向无环图&#xff08;DAG&#xff09;进行排序的算法。在一个有向图中&#xff0c;如果存在一条从节点 A 到节点 B 的路径&#xff0c;那么节点 A 就依赖于节点 B。 有向无环图如下 什么是入度&#xff0c;出度&#xff1f; 入度&#xff1a;有多少个…

10款轻量型的嵌入式GUI库分享

LVGL LittlevGL是一个免费的开源图形库&#xff0c;提供了创建嵌入式GUI所需的一切&#xff0c;具有易于使用的图形元素、漂亮的视觉效果和低内存占用。 特点&#xff1a; 强大的构建模组 按钮、图表、列表、滑块、图像等 ​先进的图形 动画、反锯齿、半透明、平滑滚动 多样…

【VR开发】【Unity】【VRTK】1-无代码VRVR开发介绍

本篇开始精简讲解VRTK相关的知识。 VRTK是基于Unity的一套提供无代码VR开发的插件,这套插件开源,可商用,集合了目前可能的VR体验组件,可以让不会C#编程但想要开发VR体验的人在不写一行代码的前提下开发出心仪的VR作品。 这套组件问世后也很受欢迎,目前已经进化到了第四代…

2023阿里云双十一优惠活动「云上聚·创未来」价格和代金券领取

2023阿里云双十一优惠活动「金秋云创季」开始啦&#xff0c;10月27日到10月31日可以领满减优惠&#xff0c;到11月1日和11月11日之间可以购买云服务器等产品&#xff0c;11.12到11.30日赢最高百万上云抵扣金&#xff0c;阿里云百科aliyunbaike.com分享2023阿里云双十一优惠活动…

合成数据的好处和用途

在不断变化的数据科学和人工智能环境中&#xff0c;合成数据集的概念成为具有多种用途的强大工具。 假设您是一名数据科学家&#xff0c;并分配了为电子商务网站创建尖端推荐系统的任务。为此&#xff0c;您需要大量的用户交互数据。但是&#xff0c;您面临着保护用户隐私和处…

基本微信小程序的外卖点餐订餐平台

项目介绍 餐饮行业是一个传统的行业。根据当前发展现状&#xff0c;网络信息时代的全面普及&#xff0c;餐饮行业也在发生着变化&#xff0c;单就点餐这一方面&#xff0c;利用手机点单正在逐步进入人们的生活。传统的点餐方式&#xff0c;不仅会耗费大量的人力、时间&#xf…

世界前沿技术发展报告2023《世界航空技术发展报告》(三)民用飞机技术

&#xff08;三&#xff09;民用飞机技术 1.干线飞机1.1 中国C919客机获得型号合格证并交付使用1.2 空客公司A321XLR超远程型窄体客机完成首飞1.3 NASA持续开展下一代民机技术研究1.4 欧洲开展“超高性能机翼”演示验证项目 2.支线飞机2.1 德国航宇中心完成“电动飞机概念及技术…

世界前沿技术发展报告2023《世界航空技术发展报告》(四)无人机技术

&#xff08;四&#xff09;无人机技术 1.无人作战飞机1.1 美国空军披露可与下一代战斗机编组作战的协同式无人作战飞机项目1.2 俄罗斯无人作战飞机取得重要进展 2.支援保障无人机2.1 欧洲无人机项目通过首个里程碑2.2 美国海军继续开展MQ-25无人加油机测试工作 3.微小型无人机…

Python+pytest+request 接口自动化测试!

一、环境配置 1.安装python3 brew update brew install pyenv 然后在 .bash_profile 文件中添加 eval “$(pyenv init -)” pyenv install 3.5.3 -v pyenv rehash 安装完成后&#xff0c;更新数据库 pyenv versions 查看目前系统已安装的 Python 版本 pyenv global 3.5…

C#WinformListView实现缺陷图片浏览器

C#&Winform&ListView实现缺陷图片浏览器 功能需求图像浏览行间距调整悬浮提示 功能需求 机器视觉检测系统中特别是缺陷检测系统&#xff0c;通常需要进行对已经检出的缺陷图片进行浏览查阅。主要是通过条件筛选查询出所需要的数据&#xff0c;进行分页再展示到界面中。…

基于SpringBoot的垃圾分类管理系统

基于SpringBootVue的垃圾分类管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven主要功能&#xff1a;包括前台和后台两部分、首页列表展示、垃圾分类、垃圾图谱、查看详…

当线性规划与算法相遇:揭秘单纯形法(Simplex)的独特魅力

传统的解决线性规划问题的方法是图形法、代数法求解&#xff0c;但是图形法解题有极大的局限性&#xff0c;因为一旦变量超过3个&#xff0c;基本上就无法通过图形解决&#xff0c;而代数法虽然可以解题&#xff0c;但对于复杂的问题可能效果较差甚至无法求解&#xff01; 相比…

嵌入式PID算法理论+实践分析

1.1 概述 比例&#xff08;Proportion&#xff09;积分&#xff08;Integral&#xff09;微分&#xff08;Differential&#xff09;控制器&#xff08;PID控制器或三项控制器&#xff09;是一种采用反馈的控制回路机制&#xff0c;广泛应用于工业控制系统和需要连续调制控制的…

LangChain+LLM实战---LangChain概述

LangChain介绍 LangChain是个开源的框架&#xff0c;它可以让AI开发人员把像GPT-4这样的大型语言模型(LLM)和外部数据结合起来。可以简单认为LangChain是LLM领域的Spring&#xff0c;以及开源版的ChatGPT插件系统。 LangChain的强大之处不仅能通过API调用语言模型&#xff0c;…

LLMs之ChatGLM3:ChatGLM3/ChatGLM3-6B的简介(多阶段增强+多模态理解+AgentTuning技术)、安装、使用方法之详细攻略

LLMs之ChatGLM3&#xff1a;ChatGLM3/ChatGLM3-6B的简介(多阶段增强多模态理解AgentTuning技术)、安装、使用方法之详细攻略 导读&#xff1a;2023年10月27日&#xff0c;智谱AI在2023中国计算机大会上推出了全自研的第三代基座大模型ChatGLM3及其相关系列产品&#xff0c;这是…

系列二十一、请描述BeanDefinition的加载过程

一、概述 BeanDefinition是用来描述bean的生产信息&#xff0c;决定bean如何生产&#xff0c;是一个定义态的bean。 二、流程 2.1、第一步&#xff1a;启动IOC容器 AnnotationConfigApplicationContext context new AnnotationConfigApplicationContext(MySpringConfig.cla…

嵌入式系统中C++ 类的设计和实现分析

C代码提供了足够的灵活性&#xff0c;因此对于大部分工程师来说都很难把握。 本文介绍了写好C代码需要遵循的10个最佳实践&#xff0c;并在最后提供了一个工具可以帮助我们分析C代码的健壮度。 原文&#xff1a;10 Best practices to design and implement a C class。 1. 尽…