组件中定义以及解绑自定义事件

已于 2022-07-14 16:39:46 修改
阅读量370 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-07-14 10:59:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46376652/article/details/125779909
版权
本文详细介绍了在Vue.js中如何定义和解绑自定义事件，包括使用@或v-on，通过ref，以及各种解绑方法。自定义事件是组件间通信的重要手段，适用于子组件向父组件传递数据。文章提供了代码实例，帮助理解事件的绑定、触发和解绑过程。
摘要由CSDN通过智能技术生成

自定义事件使用及注意事项：

1、自定义事件是一种组件间的通讯方式，适用于：子组件==>父组件；

2、使用场景：A是父组件，B是子组件，B想给A传递数据，那么就要在A中给B绑定自定义事件（事件的回调是在A中）；

3、绑定自定义事件：

第一种方式：在父组件中

<Student v-on:atguigu="getStudentName"></Student>

或

<Student @atguigu="getStudentName"></Student>

第二种方式：使用ref 

ps：如果想让自定义事件只触发一次，可以使用once修饰符或$once方法；

4、触发自定义事件：this.$emit('atguigu',this.test)；

5、解绑自定义事件：this.$off('atguigu')；

6、组件

最低0.47元/天 解锁文章
frontEndSmallWhite
关注
专栏目录
vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
Vue 组件间通信方式：自定义事件
Python+大数据+数据分析+自动化+Vue组件开发
07-10 819
前言 前期分享的测试开发系列！Vue 组件间通信方式汇总，总有一款适合你( 5分钟教程-附项目实战案例 )中介绍了 3 种组件间的通信方法，分别是： props全局事件总线消息订阅与发布 今天给大家分享第 4 种组件间的通信方法：自定义事件 适用于：子组件给父组件传递数据 使用方法 例如：Student.vue组件是School.vue组件的子组件, 子组件Student.vue想要将学生姓名传递给父组件School.vue 第1种方法：ref标识 School.vue组件内容如下 <templa
C#移除所有事件绑定的方法
01-21
本文实例讲述了C#移除所有事件绑定的方法。分享给大家供大家参考。具体分析如下： private delegate int DEL_TEST_EventHandler(int m, int n); private event DEL_TEST_EventHandler DelTestEventHandler; /// <summary> /// 移除所有的事件绑定 /// </summary> /// <param name=clearEvent></param> private void clear_event(DEL_TEST_EventHandler clearEvent) { D
自定义事件以及解绑
yh_31的博客
12-16 120
【代码】自定义事件以及解绑。
vue之组件自定义事件_解绑
yuanwen52的博客
09-16 631
1、this.$off('a') // 解绑一个事件 2、this.$off(['a','b']) // 同时解绑a 和 b两个事件 3、this.$off() 解绑所有事件
解绑自定义事件
qq_52200979的博客
04-22 97
this.$off("xxx")解绑xxx自定义事件，但只能解绑一个， 解绑多个里面是个数组形式this.$off(["xxx","yyy"]) 解绑全部事件this.$off()里面不传，有多少解绑多少
jQuery事件绑定，解绑，自定义事件
Yu的博客
11-30 657
Insert title here $(function() { /*$(":button").click(function()) .dblclcik(function() {}) .mouseout(function() {});*/ //$(":button").bind("click",clickHandler); //$(":button").bind("dblc
Vue05 TodoList 浏览器本地储存 TodoList本地存储 组件的自定义事件 解绑 总结组件自定义事件 TodoList自定义事件
weixin_58562753的博客
03-12 1184
TodoList 浏览器本地储存 TodoList本地存储 组件的自定义事件 解绑 总结组件自定义事件 TodoList自定义事件
11.5 Vue day06 父子组件通信、自定义事件
m0_56356342的博客
11-06 283
组件化编码流程：(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：1).一个组件在用：放在组件自身即可。2). 一些组件在用：放在他们共同的父组件上（状态提升）。(3).实现交互：从绑定事件开始。props适用于：(1).父组件 ==> 子组件 通信(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
vue 自定义事件 解绑
MCCLS的博客
07-24 1337
既然不用的话就解绑 对于绑的谁就去谁那进行触发,解绑则也一样,去找它解绑 在student组件里,this.$off('自定义事件名')但这适用于一个自定义事件的解绑 解绑多个事件this.$off(['','','']) 多个则需要在里面使用数组的形式,把多个事件名给包裹起来 还有一种就是进行全部解绑 当时在生命周期销毁的时候,说绿色框时,原生的dom事件能用,因为此时,只销毁了自定义事件也就是这边说的移除事件监听并不是移除原生事的监听而是自定义事件 销毁后,组..
vue自定义事件，解绑自定义事件
qq_52563729的博客
03-21 558
自定义事件
解绑事件
Charlie8915的博客
01-24 176
注意：用什么方式绑定事件，就用什么方式解绑事件 1.解绑事件 对象.on事件名字=时间处理函数---》绑定事件 对象。on事件名字=null; 2.解绑事件 对象.addEventListener("没有on的事件类型"，命名函数，false)；--绑定事件 对象.removeEventListener("没有on的事件类型"，命名函数，false)；--解绑事件 3.解绑...
Jquery的on，off事件详解，如何利用命名空间来解绑特定的事件
zpjshiwo77的博客
11-06 1046
最近在学习写一个基于jquery的js插件时，因为需要用到键盘按键事件，所以就用了bind的方法去绑定元素事件。可用的时候发现，在绑定事件和解绑事件时bind的方法无法满足我的需求。
移除事件的绑定
bangxionger9224的博客
05-16 88
HTML：<!DOCTYPE ><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> ...
事件解绑（解除绑定事件处理函数）
cy588135的博客
12-01 317
事件绑定
绑定事件与解绑事件
sunhaomei的博客
05-14 245
解绑事件 IE8不支持 解绑
事件绑定与解除绑定
qq_39039128的博客
11-28 571
事件：点击、keydown、拖拽 绑定事件的意思是：绑定事件处理函数 &amp;lt;div&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; var div = document.getElementsByTagName('div')[0]; // div具有点击事件 后面的function是事件触发的方法 div.onclick...
Vue2.0 Vue脚手架 自定义事件_解绑
yasinawolaopo的博客
12-20 171
Vue2.0 Vue脚手架 自定义事件_解绑
vue自定义事件、解绑、销毁全部
最新发布
05-02
Vue.js 提供了 $emit() 方法来触发自定义事件，可以使用 v-on 指令监听自定义事件。 例如，我们可以在组件中定义一个自定义事件： ``` <template> <button @click="handleClick">点击触发自定义事件</button> </template> <script> export default { methods: { handleClick() { this.$emit('my-event', '参数'); } } } </script> ``` 然后，在父组件中监听该事件： ``` <template> <div> <child-component @my-event="handleMyEvent"></child-component> </div> </template> <script> export default { methods: { handleMyEvent(param) { console.log('触发了自定义事件，参数为：' + param); } } } </script> ``` 如果要解绑自定义事件的监听，可以使用 $off() 方法： ``` this.$off('my-event'); ``` 如果要销毁组件的全部事件监听，可以在组件销毁时使用 $off() 方法： ``` beforeDestroy() { this.$off(); } ``` 这样可以清除组件的全部事件监听。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值