vue中this.$off()事件解绑

最新推荐文章于 2024-07-04 10:41:11 发布
原创 最新推荐文章于 2024-07-04 10:41:11 发布 · 3.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了Vue.js中事件总线(vm.$off)的使用方法，包括如何移除自定义事件监听器，以及在不同参数组合下，如何影响事件监听器的移除。这对于理解Vue组件间的通信机制至关重要。

3、vm.$off( [event, callback] )

移除自定义事件监听器。

  1. 如果没有提供参数，则移除所有的事件监听器；（注意这条，一般在main.js中，移除所有事件绑定）
  2. 如果只提供了事件，则移除该事件所有的监听器；
  3. 如果同时提供了事件与回调，则只移除这个回调的监听器。
[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信
qq_14993591的博客
11-09 6061
全局事件总线原理分析 前提：x是个组件，不属于任何一个组件 要求：A组件想要收到别的组件给的信息 在A组件里给x绑定个自定义事件demo,对应的回调函数就留在A中 D组件想给A传点数据，就可以这样做： 在D组件里，写点代码触发x身上的demo事件，并且传点数据过去（666）， x身上的demo事件被触发了，demo事件的回调函数就得执行，而这个回调函数在A组件里面，那之前D组件传的数据666，就在A组件里面 要求：B组件想收到点别的组件传的数据， 在B组件里写点代码，给x组件绑定个事件test,回调函
Vue基础
weixin_64784735的博客
06-26 730
Vue组件的基本使用
初识vue（1）——一篇博客教你掌握 vue 基础
小R.的博客
10-29 1374
  最近跟着vue相关视频学了些vue的基础知识，做此总结，以防遗忘。 Hello Vue 1、引入vue.js： <script type="text/javascript" src="../js/vue.js"></script> 2、创建Vue对象： el : 指定根element(选择器，指定用vue来管理页面中的哪个标签区域) data : 初始化数据 这是ht...
vue源码解析：vue事件方法之$off方法的实现原理
lee前端技术站
07-12 4290
vue中事件方法一共就四个，挂载在vue实例上的$off移除事件中心里面某个事件的回调函数，通常会用到，那么$off的内部实现原理是什么呢？下面我们来详细说下$off: vm.$off( [event, callback] ) 参数： {string | Array<string>} event(只在 2.2.2+ 支持数组) {Function} [callback] 作用： 移除自定义事件监听器。 如果没有提供参数，则移除所有的事件监听器； 如果只提供了事件，则移除该事件..
Vue 的 $emit、$on、$once、$off 理解详解
My_wife_QBL的博客
07-04 2350
Vue 的$emit$on$once和$off方法提供了强大的自定义事件管理功能，使得组件之间的通信更加灵活和高效。通过$emit触发事件、$on监听事件、$once一次性监听事件和$off移除事件监听器，我们可以构建出结构清晰、功能丰富的组件系统。希望本文能够帮助你全面理解 Vue 的这些方法，并在实际开发中发挥其最大的价值。
Vue 事件机制,手写$on,$off,$emit,$once
莫问前程F1的博客
08-20 1076
Vue 事件机制 本质上就是 一个 发布-订阅 class Vue { constructor() { // 事件通道调度中心 this._events = Object.create(null); } $on(event, fn) { if (Array.isArray(event)) { event.map(item => { this.$on(item, fn); }); } else ...
vue的this.$ 常见的用法
weixin_45266691的博客
05-24 1934
是一个常见的用法，用于访问 Vue 实例的一些内置属性、方法或者插件提供的功能。: 访问用于发起 HTTP 请求的插件，如 axios、vue-resource 等。属性和方法，具体可根据需要查看 Vue.js 的官方文档以及所使用的插件的文档。: 在当前实例上监听一个自定义事件，但是只触发一次。: 响应式地添加一个属性到 Vue 实例的数据对象。: 响应式地删除 Vue 实例的数据对象的属性。: 在子组件中触发父组件绑定的事件。: 监听 Vue 实例上的数据变化。: 获取 Vue 实例的数据对象。
this.$emit this.$on this.$off
11-27
`this.$off`用于解绑自定义事件。它可以不传参数，解绑所有的自定义事件；也可以传递一个事件名称，解绑指定的自定义事件。例如： ```javascript // 解绑所有的自定义事件 this.$off() // 解绑指定的自定义事件 this...
vue中使用this.$root.Bus.on，但是不调用this.$root.Bus.off，会产生什么问题？
07-14
在Vue中使用`this.$root.$on`绑定事件监听器后，如果没有调用`this.$root.$off`进行解绑，会导致潜在的内存泄漏问题。 当您使用`this.$root.$on`方法绑定事件监听器时，Vue会在组件销毁时自动解绑这些事件。然而，...
vue2 this.$on
最新发布
10-15
在 Vue 2 中，`this.$on` 是一个实例方法，用于监听当前 Vue 实例上通过 `this.$emit` 触发的自定义事件。它通常用于**组件间通信**，尤其是在非父子关系的组件中（配合事件总线使用）。 --- ### ✅ 基本用法 ```...
this $on this,$off this.$emit
08-10
回答: 在Vue.js中，可以使用$on方法来监听一个自定义事件，$off方法可以用来解绑事件，而$this.$emit可以用来触发一个自定义事件。 例如，在页面a中，可以使用this.$bus.$on(event, callback)来监听一个事件，并在回...
vue中$refs, $emit, $on, $once, $off的使用详解
coldriversnow的专栏
06-06 2887
只能监听自定义事件。
每日一学vue2：自定义绑定事件解除方式（$off）及销毁vc
小淼淼的博客
09-28 1359
每日一学vue2：自定义绑定事件解除方式（$off）及销毁vc
[vue] Vue组件绑定自定义事件 子传父（props this.$emit()，this.$ref） 解绑自定义事件 this.$off this.$destroy()
qq_14993591的博客
11-08 1875
基础代码 School.vue <template> <div class="school"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template> <script> export default { name:'School', data() { return { na
vue9种跨组件传参-props、$emit、$refs、$EventBus、消息订阅与发布...
TKY666的博客
08-29 5716
通过 props 传递 通过 $emit 触发自定义事件 使用 ref EventBus $parent 或$root attrs 与 listeners Provide 与 Inject Vuex
前端入门（三）Vue组件化编程、脚手架、插槽插件、存储、vuex、组件事件、动画、代理
芸兮的博客
11-24 1653
以子组件向父组件传递数据为例：如果不用自定义事件，可以通过父组件给子组件传递函数类型的props实现step1：给子组件School绑定getSchoolName函数，相当于子组件的School的组件实例会有getSchoolName(）这个函数。step2：用props承接父组件注册的getSchoolName。按钮注册点击事件，调用该函数，并将组件的name参数传递。如果使用自定义事件来实现：step1：通过v-on: 给子组件Student绑定自定义事件atguigu。
Vue 中使用事件总线来进行组件间通信($emit()、$on() 和 $off())
苦瓜_小学生的博客
03-19 1350
Vue 中使用事件总线来进行组件间通信($emit()、$on() 和 $off()) 父页面A弹框为隐藏(false)状态时，移除子组件B中的弹框B 子组件 B 能够在弹框状态为 false 时也能监听到父页面 A 的弹框关闭状态，这就需要使用事件总线来实现 v-if 来判断是否显示某个元素时，当条件为 false 时，对应的 DOM 元素会被移除 这意味着在页面渲染时，如果 v-if 的条件为 false，相关的 DOM 结构将不会存在于最终的渲染结果中
jQuery中的事件
Albert_ChengXY的博客
08-14 351
事件 添加事件和删除事件 $(“div”).on(“click”,clickHandler); //添加事件 function clickHandler(e){ console.log(“a”); $(this).off(“click”,clickHandler);//删除事件 } $(“div”).on(“click.a”,function(e){ console.log(“a”); $(this).off(“click”); 将所有click事件的内容全部删除 $(this).off(“clic
jquery 事件操作on、off分析
ddvrz84666的专栏
10-13 449
前端框架jquery用的比较多，但一直也没好好看过源码，一般就看看使用手册。这次因为用on注册委托事件后，没注意直接用off移除了该元素的指定类型事件，使用时发现被委托的子元素上不会在触发事件，然后打算一窥究竟jquery的事件具体是怎么实现的，下面记录一下学习结果，参考的是jquery.1.11.3。 一、jQuery事件注册 on 测试：$( this.$dom).on("c...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值