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

一、绑定自定义事件

(一)使用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="事件回调">

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端接口请求支持内容缓存和过期时间

前端接口请求支持内容缓存和过期时间 支持用户自定义缓存时间&#xff0c;在规则时间内读取缓存内容&#xff0c;超出时间后重新请求接口 首先封装一下 axios&#xff0c;这一步可做可不做。但是在实际开发场景中都会对 axios 做二次封装&#xff0c;我们在二次封装的 axios …

如何使用 nvm-windows 这个工具来管理你电脑上的Node.js版本

nvm-windows 是一个用于管理在 Windows 上安装的多个 Node.js 版本的工具。以下是安装和使用 nvm-windows 的步骤&#xff1a; 第1步&#xff1a;下载 nvm-windows 访问 nvm-windows 的 GitHub发布页面.下载最新版本的 nvm-setup.zip 文件。 第2步&#xff1a;安装 nvm-wind…

Postman的高级使用,傻瓜式学习【下】

目录 前言 1、全局变量、环境变量 1.1、概念&#xff1a; 1.2、如何设置全局变量、环境变量 1.3、获取全局变量、环境变量 1.4、案例1&#xff1a;手动设置变量&#xff0c;请求参数获取 1.5、案例2&#xff1a;代码设置变量&#xff0c;代码获取变量 2、Postman读取外部…

TypeScript深度剖析:TypeScript 中命名空间与模块的理解?区别?

一、模块 TypeScript 与 ECMAScript 2015 一样&#xff0c;任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地&#xff0c;如果一个文件不带有顶级的import或者export声明&#xff0c;那么它的内容被视为全局可见的 例如我们在在一个 TypeScript 工程下建立一…

canvas:理解canvas / 基础使用 / Demo效果

一、理解Canvas Canvas是一个HTML5元素&#xff0c;用于在Web页面上绘制2D或3D图形。它允许使用JavaScript在网页上创建和操作图形。Canvas的主要功能是绘图&#xff0c;但也可以用来实现其他功能&#xff0c;如动画和交互式游戏。 使用Canvas&#xff0c;可以创建各种形状、…

Vue的快速入门

Vue的快速入门 下载并安装vue.js Vue是一个基于JavaScript实现的框架, 要使用它就需要从[Vue官网]((https://cn.vuejs.org/)下载 vue.js 文件 第一步&#xff1a;打开Vue2官网&#xff0c;点击下图所示的“起步” 第二步&#xff1a;继续点击下图所示的“安装” 第三步&…

深度学习(4)---生成式对抗网络(GAN)

文章目录 一、原理讲述1.1 概念讲解1.2 生成模型和判别模型 二、训练过程2.1 训练原理2.2 损失函数 三、应用 一、原理讲述 1.1 概念讲解 1. 生成式对抗网络&#xff08;Generative Adversarial Network&#xff0c;GAN&#xff09;是一种深度学习模型&#xff0c;是近年来复杂…

万字解析设计模式之原型模式与建造者模式

一、原型模式 1.1概述 原型模式是一种创建型设计模式&#xff0c;其目的是使用已有对象作为原型来创建新的对象。原型模式的核心是克隆&#xff0c;即通过复制已有对象来创建新对象&#xff0c;而不是通过创建新对象的过程中独立地分配和初始化所有需要的资源。这种方式可以节…

nrf52832 开发板入手笔记:J-Flash 蓝牙协议栈烧写

前言 nrf52832 想要开启 蓝牙功能&#xff0c;比如蓝牙主从机功能&#xff0c;需要额外烧写 蓝牙协议栈的固件&#xff1a;softdevice&#xff0c;换句话说&#xff0c;蓝牙协议栈等代码是不开放的&#xff0c;只提供一个 二进制文件。 也就是 nrf52832 Flash 与 RAM 要分区了…

[激光原理与应用-72]:PLC架构与工作原理

目录 一、PLC简介 1.1 概述 1.2 基本组成 1.3 常见的PLC品牌比较 二、PLC程序执行原理 2.1 PLC有操作系统吗&#xff1f; 2.2 PLC程序执行 2.3 PLC编程语言 2.4 PLC编程过程 三、PLC编程工具 3.1 编程工具 四、PLC与工控机协同 4.1 PLC需要配置工控机吗&#xff1…

滴滴学生认证拉新上线了 地推网推百搭项目

滴滴学生认证可以通过“聚量推客”申请&#xff0c;是一手官签服务商 量级足够大 优势&#xff1a;实时数据T1结算 百分百数据 滴滴学生认证可搭配小红书签到拉新、美团私域校园版拉新、美团圈圈拉新一起做&#xff0c;这样能赚取更多佣金

springboot和flask整合nacos,使用openfeign实现服务调用,使用gateway实现网关的搭建(附带jwt续约的实现)

环境准备&#xff1a; 插件版本jdk21springboot 3.0.11 springcloud 2022.0.4 springcloudalibaba 2022.0.0.0 nacos2.2.3&#xff08;稳定版&#xff09;python3.8 nacos部署&#xff08;docker&#xff09; 先创建目录&#xff0c;分别创建config&#xff0c;logs&#xf…

Chatgpt网页版根据关键词自动批量写原创文章软件【可多开自动登录切换gpt账号】

Chatgpt网页版根据关键词自动批量写原创文章软件介绍&#xff1a; 1、需要放入GPT账号和密码放入在账号库.txt里&#xff0c;可以放入多组账号密码&#xff0c;账号切换轮流使用。 2、可以自定义回答指令&#xff0c;也可多个回答指令随机切换。 3、可以给关键词加双标题&…

【EI会议征稿】 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)

2024年遥感、测绘与图像处理国际学术会议(RSMIP2024) 2024 International Conference on Remote Sensing, Mapping and Image Processing 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)将于2024年1月19日-21日在中国厦门举行。会议主要围绕遥感、测绘与图像处理等研究领…

宝塔Linux面板Java项目前后端部署 (PHP部署前端文件)

1. 上传前端文件 将整个文件夹拖进来 2. PHP项目 (添加站点) 添加证书SSL 新增配置文件 location /dev-api/{proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_…

网络新闻发稿为何经久不衰?

有的老板可能看不到新闻营销的直接回报&#xff0c;一直不乐意在此方面投入&#xff0c;但是却看到竞争对手一直在搞新闻营销&#xff0c;也就安排个PR做做新闻公关。小马识途营销顾问观察&#xff0c;自互联网诞生以来&#xff0c;新闻营销一直是网络营销工作中的一个重点。 如…

Mysql系列 -索引数据结构

索引就是排好序的数据结构&#xff0c;可以帮助我们快速的查找到数据&#xff0c;那么底层的数据到底是如何存储的呢&#xff1f; 为什么InnoDB 用的是Btree 存储结构&#xff1f; 大家可以看看这个可视化的网站 数据结构和算法的可视化工具 可以看到数据结构里面有链表&…

学习笔记|配对样本均数T检验|SPSS常用的快捷键|规范表达|《小白爱上SPSS》课程:SPSS第六讲 | 配对样本均数T检验

目录 学习目的软件版本原始文档配对样本均数T检验一、实战案例二、案例解析三、统计策略四、SPSS操作1、正态性检验2、配对样本T检验 五、结果解读六、规范报告1、规范表格2、规范文字 划重点Tips:SPSS常用的快捷键 学习目的 SPSS第六讲 | 配对样本均数T检验 软件版本 IBM S…

【JavaSE专栏58】“Java构造函数:作用、类型、调用顺序和最佳实践“ ⚙️⏱️

解析Java构造函数&#xff1a;作用、类型、调用顺序和最佳实践" &#x1f680;&#x1f4da;&#x1f50d;&#x1f914;&#x1f4dd;&#x1f504;⚙️⏱️&#x1f4d6;&#x1f310; 摘要引言1. 什么是构造函数 &#x1f914;2. 构造函数的类型与用途 &#x1f4dd;1.…

课题学习(九)----阅读《导向钻井工具姿态动态测量的自适应滤波方法》论文笔记

一、 引言 引言直接从原论文复制&#xff0c;大概看一下论文的关键点&#xff1a; 垂直导向钻井工具在近钻头振动和工具旋转的钻井工作状态下&#xff0c;工具姿态参数的动态测量精度不高。为此&#xff0c;通过理论分析和数值仿真&#xff0c;提出了转速补偿的算法以消除工具旋…