Vue 自定义事件绑定与解绑

绑定自定义事件

说到 Vue 自定义事件,那就需要搞清楚一个问题,为啥有这个玩意。

说到自定义事件之前,需要理解 组件基础的概念。理解了基础概念之后,我们就知道 Vue 的父子之间的通信, 一是  父组件通过 Prop 向子组件传递数据 。二是 监听子组件事件。

具体详情参考之前的博文:Vue-父子组件传值。

vue-07-父子组件传值_vue handler(n) {}_白桃味稠鱼烧的博客-CSDN博客因为vue 的数据是单向流动的,这是为了避免数据污染。在官方文档中也说到:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。大致归纳一下:父传子--传值、子传父--传事件1、父传子如果传递的数据是对象格式的,那么在子组件 内部监..._vue handler(n) {}https://blog.csdn.net/qq_40792800/article/details/105559859这篇博文中详细说明了 父子组件传值的方法,其中就有 子组件传递数据给父组件的三种方法,其实就是 通过自定义事件 来实现的。实现方法也在其中详细说明了。

$off:解绑自定义事件

 上面说过了 通过绑定自定义事件,实现了子组件向父组件传递数据,那么既然有绑定方法,就应该和原生js一样,有解绑的方法,也存在解绑的方法,那就是 $off() 。

  • 如果没有提供参数,则移除所有的事件监听器;

  • 如果只提供了事件,则移除该事件所有的监听器;

  • 如果同时提供了事件与回调,则只移除这个回调的监听器

父组件只使用一种绑定方法

<School @test="test"/>methods: {test(val) {console.log(val,'这是子组件传递过来的数据')},
},

子组件解绑事件

1、只提供事件,则移除该事件所有的监听器( 只传递一个事件和传递多个事件 )

<template><div><p class="demo" @click="goto">School组件</p><p @click="unbind">解绑事件</p></div>
</template>export default {data() {return {msg: "子组件数据",};},methods: {goto() {this.$emit("test", this.msg);},unbind() {console.log("解绑事件");this.$off('test');  // 若只传递一个参数,则只解绑一个自定义事件this.$off(['test1','tset2','test3']);  // 若传递一个数组,则同时解绑传递的多个自定义事件},},
};

触发父组件事件之后,点击触发解绑事件,再次触发父组件事件,无法打印出子组件数据

 2、同时提供了事件与回调,则只移除这个回调的监听器

  • 我在子组件的 mounted 生命周期中 监听了 myEvent 事件,且该事件上存在两个回调函数
  • 点击 测试按钮时,$emit 触发 myEvent 事件,myEvent 事件上的回调函数全部触发
  • 点击解绑按钮,解绑 myEvent 事件 上的 this.myCallback() 函数,只剩下 匿名函数
  • 再次点击 测试按钮,发现 myEvent 事件 上,this.myCallback() 函数不触发,匿名函数触发
<template><div><p @click="test">测试</p><p @click="remove">解绑myCallback</p></div>
</template><script>
export default {mounted() {// 添加事件监听器,在组件挂载后执行 myCallback 函数this.$on('myEvent', this.myCallback);this.$on('myEvent', () => {console.log('我是匿名函数,我被触发了')});},methods: {test() {this.$emit('myEvent')},remove() {console.log('我解绑了myCallback,但是没有解绑匿名函数')this.$off('myEvent',this.myCallback)},myCallback() {console.log('我是myCallback,我被触发了')}},
};
</script>

 

 ps:$on 监听事件之后,需要 $emit 触发事件监听,才去执行 $off,不然绑定的事件没触发,看不出来效果( 绑定事件都不触发,你解绑它干啥,直接不监听就行了啵 )

3、 如果没有提供参数,则移除所有的事件监听器

在父组件中给 School子组件 绑定两个自定义事件

<School @test="test" @test1="test1"/>methods: {test(val) {console.log(val,'这是子组件传递过来的数据')},test1(val) {console.log(val,'这是子组件传递过来的数据1')},
},

在子组件中触发两个绑定的自定义事件

<template><div><p @click="bind">绑定</p><p @click="remove">解绑</p></div>
</template><script>
export default {methods: {bind() {this.$emit('test','test')this.$emit('test1','test1')},remove() {this.$off()},},
};
</script>
  • 点击 bind 触发绑定事件,控制台上会打印出数据。
  • 点击 remove 移除所有绑定事件。
  • 再次点击 bind 触发绑定事件,控制台无输出,表明所有绑定事件已移除

 Vue destroyed() 生命周期

 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

<template><div><p @click="bind">绑定</p><p @click="death">销毁子组件</p></div>
</template><script>
export default {methods: {bind() {this.$emit('test','test')this.$emit('test1','test1')},death() {this.$destroy()}},
};
</script>
  • 点击 bind 按钮,触发绑定函数,控制台上输出。
  • 点击 销毁子组件 按钮,销毁子组件,移除所有事件监听器,解绑所有指令
  • 再次点击 bind 按钮,控制台无输出

总结

 1、组件的自定义事件是一种组件间的通信方式:子组件 向 父组件 传递数据

2、使用场景:子组件B 向 父组件A 传递数据,需要在 父组件A 中给 子组件B 绑定自定义事件( 事件的回调在 A 中 )

3、绑定自定义事件:

  • 第一种方式:在父组件中 
  • <School @test="test"/><School v-on:test="test"/>
  • 第二种方式:在父组件中
  • <School ref='student'/>mounted() {this.$refs.student.$on('qwe', this.getname)
    }
  • 第三种方式:若想让自定义事件只能触发一次,可以使用 once 修饰符,或 $ones 方法

4、触发自定义事件 

this.$emit('test','向传递的数据')

 5、解绑自定义事件

this.$off()

6、也可以使用  生命周期钩子函数 this.$destroy() 来销毁组件达到解绑所有自定义事件

7、组件上也可以绑定 原生DOM事件,使用  .native 事件。即使是 @click 事件,Vue也不会将其解析为 自定义事件,不用在 School 子组件中 使用 $emit 触发

<School @click.native="test"/>

8 、注意:通过 this.$refs.xxx.$on( 'xxx' , callback ),绑定自定义事件时,callback 回调要么配置在 mtenods 中,要么使用箭头函数,否则 this 指向存在问题( 因为 callback 函数接收的参数都是从子组件中传递的,包括 this也是,如果使用 function () {} 函数,则该函数内部 this 指向子组件 )

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

8.3day04git+数据结构

文章目录 git版本控制学习高性能的单机管理主机的心跳服务算法题 git版本控制学习 一个免费开源&#xff0c;分布式的代码版本控制系统&#xff0c;帮助开发团队维护代码 作用&#xff1a;记录代码内容&#xff0c;切换代码版本&#xff0c;多人开发时高效合并代码内容 安装g…

抽象工厂模式(Abstract Factory)

抽象工厂模式提供一个创建一组相关或相互依赖的对象的接口&#xff0c;而无须指定它们具体的类&#xff0c;每个子类可以生产一系列相关的产品。 The Abstract Factory Pattern is to provide an interface for creating families of related or dependent objects without s…

谷歌: 安卓补丁漏洞让 N-days 与 0-days 同样危险

近日&#xff0c;谷歌发布了年度零日漏洞报告&#xff0c;展示了 2022 年的野外漏洞统计数据&#xff0c;并强调了 Android 平台中长期存在的问题&#xff0c;该问题在很长一段时间内提高了已披露漏洞的价值和使用。 更具体地说&#xff0c;谷歌的报告强调了安卓系统中的 &quo…

Matlab对TMS320F28335编程--SVPWM配置互补PWM输出

前言 F28335中断 目的&#xff1a;FOC的核心算法及SVPWM输出&#xff0c;SVPWM的载波频率10kHz&#xff0c;SVPWM的每个周期都会触发ADC中断采集相电流&#xff0c;SVPWM为芯片ePWM4、5、6通道&#xff0c;配置死区 1、配置中断SVPWM进ADC中断&#xff0c;查上表知CPU1,PIE1 …

回归分析书籍推荐

回归分析在线免费书籍&#xff1a;I 1-ntroduction to Regression Methods for Public Health using R Introduction to Regression Methods for Public Health Using R 2-An Introduction to Statistical Learning https://hastie.su.domains/ISLR2/ISLRv2_website.pdf 可以…

【Jmeter】压测mysql数据库中间件mycat

目录 背景 环境准备 1、下载Jmeter 2、下载mysql数据库的驱动包 3、要进行测试的数据库 Jmeter配置 1、启动Jmeter图形界面 2、加载mysql驱动包 3、新建一个线程组&#xff0c;然后如下图所示添加 JDBC Connection Configuration 4、配置JDBC Connection Configurati…

vue运行在IE浏览器空白报错SCRIPT1006: 缺少‘)‘ -【vue兼容IE篇】

其他浏览器均正常&#xff0c;但是切换ie模式&#xff0c;打开空白&#xff0c;F12打开报错缺少‘)‘ &#xff0c;如下图 在搜狗浏览器下点开报错&#xff1a;定格在crypto-js处 解决&#xff1a; 步骤一&#xff1a;使用npm安装babel-polyfill 依赖&#xff08;已安装了可忽…

AI赋能转型升级 助力打造“数智辽宁”——首次大模型研讨沙龙在沈成功举行

当前&#xff0c;以“ChatGPT”为代表的大模型正在引领新一轮全球人工智能技术发展浪潮&#xff0c;推动人工智能从以专用小模型定制训练为主的“手工作坊时代”&#xff0c;迈入以通用大模型预训练为主的“工业化时代”&#xff0c;正不断加速实体经济智能化升级&#xff0c;深…

主流CRM有哪些特点和优势?

现如今&#xff0c;CRM系统是企业实现数字化转型&#xff0c;提高销售收入的首选工具。但市场上有众多CRM品牌&#xff0c;每家都有自己的特点和优势&#xff0c;企业该如何进行选择&#xff1f;下面我们就来进行主流CRM系统比较&#xff0c;并说说什么CRM产品比较好? 主流CR…

学习笔记|C251|STC32G单片机视频开发教程(冲哥)|第三集:开发环境搭建和程序下载

文章目录 1.STC-ISP软件的下载2.STC32手册下载3.PDF阅读器下载4.学会PDF阅读器查阅手册5.跟着手册搭建C251开发环境Tips:如何同时安装Keil的C51、C251和MDK 6.程序包的下载7.第一个工程的编译和下载 原作者/主讲人&#xff1a;冲哥 原始视频地址 1.STC-ISP软件的下载 STC-ISP …

Clickhouse 优势与部署

一、clickhouse简介 1.1 clickhouse介绍 ClickHouse的背后研发团队是俄罗斯的Yandex公司&#xff0c;2011年在纳斯达克上市&#xff0c;它的核心产品是搜索引擎。我们知道&#xff0c;做搜索引擎的公司营收非常依赖流量和在线广告&#xff0c;所以做搜索引擎的公司一般会并行推…

wordpress发表文章时报错: rest_cannot_create,抱歉,您不能为此用户创建文章(已解决)

使用wordpress 的rest api发布文章&#xff0c;首先使用wp-json/jwt-auth/v1/token接口获取token&#xff0c;然后再使用/wp-json/wp/v2/posts 接口发表文章&#xff0c;但是使用axios请求时&#xff0c;却报错&#xff1a; 但是&#xff0c;我在postman上却是可以的&#xff0…

el-table 去掉边框(修改颜色)

原始&#xff1a; 去掉表格的border属性&#xff0c;每一行下面还会有一条线&#xff0c;并且不能再拖拽表头 为了满足在隐藏表格边框的情况下还能拖动表头&#xff0c;修改相关css即可&#xff0c;如下代码 <style lang"less"> .table {//避免单元格之间出现白…

神策新一代分析引擎架构演进

近日&#xff0c;神策数据已经推出全新的神策分析 2.5 版本&#xff0c;该版本支持分析模型与外部数据的融合性接入&#xff0c;构建全域数据融合模型&#xff0c;实现从用户到经营的全链路、全场景分析。新版本的神策分析能够为企业提供更全面、更有效的市场信息和经营策略&am…

35岁,体能断崖?35岁的技术人还能继续干吗?

文章目录 前言1、首先来聊聊程序员的几个[通病]2、来聊聊程序员病的普及3、聊聊自己的体能状况和身体焦虑4、结论相关项目实现推荐&#xff1a;[查看更多博主首页更多实战项目 >>>](https://blog.csdn.net/s445320) &#x1f339;作者主页&#xff1a;青花锁 &#x1…

使用mysql容器创建主从同步

1、主数据库设置 创建主数据库容器&#xff1a; docker run -d --restartalways --name mysql-master -p 3306:3306 -v /home/apps/mysql-master/conf:/etc/mysql/conf.d -v /home/apps/mysql-master/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD123456 mysql:8.0.16 --lower…

AI 3D结构光技术加持,小米引领智能门锁新标准

一直以来&#xff0c;小米智能门锁系列产品让更多家庭走进了安全便捷的智能生活&#xff0c;安全至上的设计让很多家庭都轻松告别了随身钥匙。 7月27日&#xff0c;小米正式推出小米智能门锁M20 Pro&#xff0c;再一次引领智能门锁产品的发展潮流。该款门锁采用AI 3D结构光技术…

在centos7.9安装tomcat8,并配置服务启动脚本,部署jpress应用

目录 一、简述静态网页和动态网页的区别 二、简述 Webl.0 和 Web2.0 的区别 三、 安装Tomcat8&#xff0c;配置服务启动脚本&#xff0c;部署jpress应用 3.1、Tomcat简介 3.2、安装Tomcat 3.2.1、配置环境 3.2.2、安装JDK 3.2.3、安装tomcat8 3.2.4、访问主页&#xff1…

Transformer 论文学习笔记

重新学习了一下&#xff0c;整理了一下笔记 论文&#xff1a;《Attention Is All You Need》 代码&#xff1a;http://nlp.seas.harvard.edu/annotated-transformer/ 地址&#xff1a;https://arxiv.org/abs/1706.03762v5 翻译&#xff1a;Transformer论文翻译 特点&#xff1…

前端视频播放技术概览

转眼间&#xff0c;2023 年已进入下半场&#xff0c;在这样一个时间节点下&#xff0c;长视频平台如爱奇艺、优酷、腾讯视频等&#xff0c;以及短视频平台如抖音、快手等&#xff0c;对大家来说早已是司空见惯的事物。然而&#xff0c;在我们追剧、刷弹幕的时候&#xff0c;很少…