vue 自定义事件 解绑

最新推荐文章于 2022-08-04 23:59:26 发布
最新推荐文章于 2022-08-04 23:59:26 发布
阅读量1.3k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/119046853
版权

既然不用的话就解绑

对于绑的谁就去谁那进行触发,解绑则也一样,去找它解绑

在student组件里,this.$off('自定义事件名')但这适用于一个自定义事件的解绑

解绑多个事件this.$off(['','','']) 多个则需要在里面使用数组的形式,把多个事件名给包裹起来

 

还有一种就是进行全部解绑

 当时在生命周期销毁的时候,说绿色框时,原生的dom事件能用,因为此时,只销毁了自定义事件也就是这边说的移除事件监听并不是移除原生事的监听而是自定义事件

销毁后,组件和组件的自定义事件就销毁了但是原生还是存在,也就是click还存在

 

 

 

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue优化:常见会导致内存泄漏问题及优化详解
01-21
如果你在用 Vue 开发应用，那么就要当心内存泄漏的问题。这个问题在单页应用 (SPA) 中尤为重要，因为在 SPA 的设计中，用户使用它时是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。因此在vue开发过程中，你需要时刻警惕内存泄漏的问题，这些内存泄漏往往会发生在使用 Vue 之外的其它进行 DOM 操作的三方库时，请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理。 下面是我开发过程中遇到，并查资料总结的内存泄漏问题，会持续更新中 一、vue自定义指令给元素绑定事件，却没有解绑事件 这个问题见上篇博客，vue自定义指令导致的内存
16.Vue - 组件自定义事件、子-＞父组件通信
weixin_51351637的博客
09-12 2604
组件间通信①第一种方式，在父组件中: 或②第二种方式，在父组件中:③若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法：使用@或v-on) -->
DOM事件绑定或解绑的几种方式
qq_51513645的博客
06-09 1071
1.html中直接绑定 html中绑定事件叫做内联绑定事件，不利于分离。 <input type="button" value="click me" onclick="show(this,type,event)"> 2.js中直接绑定 js中直接绑定称为赋值绑定函数，缺点是只能绑定一次。 window.onload =function(){ console.log("onload事件执行..."); var oBtn = document.getElementById('btn1
JS——注册事件及解绑事件
weixin_52148548的博客
02-13 1282
这里写目录标题概念1. 传统方式（on~）注册事件解绑事件2. 事件监听注册方式 addEventListener()注册事件解绑事件3.两种方式的区别传统方式事件监听注册方式 概念 给元素添加事件，称为注册事件或绑定事件。 给元素移除事件，称为解绑事件。 1. 传统方式（on~） 注册事件 以on开头的事件： onclick（鼠标单击），onmousemove（鼠标移动）等等 语法： target.onclick=function(){}; 举例：给button注册事件，使按下打印数字1 <but
vue总结
北极熊的博客
04-13 223
v-for和v-if 优先级 v-for 优先于 v-if，如果外层有判断，可以先在外层判断，如果循环list里面需要有v-if判断，为了防止render函数多次渲染，可以用计算属性对list先进行过滤 ...
vue自定义指令实现方法详解
10-17
Vue自定义指令提供了一种灵活的方式来扩展Vue的默认功能，使得我们可以更精确地控制DOM操作。通过定义不同的钩子函数，我们可以实现各种复杂逻辑，如事件监听、动画效果、DOM操作等。理解并掌握自定义指令的使用，...
Vue自定义指令介绍(2)
11-26
5. `unbind`: 当指令与元素解绑时调用，用于清理在`bind`中创建的资源，如移除事件监听器。 `definition`对象中的`binding`参数提供了关于指令的信息，包括： - `name`：指令名称，不带`v-`前缀。 - `value`：指令...
Vue自定义指令上报Google Analytics事件统计的方法
10-17
本文将详细介绍如何使用Vue自定义指令来上报Google Analytics事件统计。 首先，我们遇到的问题是当页面中的交互元素（如按钮）增多时，为每个事件处理函数添加统计代码会使得代码变得冗余且不易维护。传统的做法是...
解决vue自定义指令导致的内存泄漏问题
11-19
总结来说，Vue自定义指令的内存泄漏问题主要源于事件监听器未被正确解绑。通过使用`inserted`和`unbind`钩子，以及在`inserted`中创建解绑方法并在`unbind`中调用，我们可以有效地解决这个问题。在编写自定义指令时...
Vue自定义指令使用方法详解
08-29
本文将深入探讨Vue自定义指令的使用方法。 ### 1. 自定义指令的语法 创建自定义指令的基本语法是通过`Vue.directive()`方法，它接收两个参数：指令ID和定义对象。例如： ```javascript Vue.directive('my-...
十、【VUE-CLI】组件的自定义事件（待办事项案例 · 第三版）
天行健，君子以自强不息
08-04 216
组件的自定义事件
【Vue2】组件通信 之 自定义事件
Superman_H的博客
02-09 1885
# 自定义事件 自定义事件，用于实现子组件到父组件的数据传递 1. 在父组件中，给子组件标签元素设置**自定义事件** `` 【监听事件函数】 2. 在子组件中，通过 `[this.]$emit("事件名", 数据)` 触发自定义事件，并传递数据 传递多个 `数据` 时，用 `,` 隔开 【触发事件函数、传数据】 3. **销毁当前子组件的自定义事件：**（在子组件中调用） 【关闭事件】 单个自定义事件：`[this.]$off("事件名")` - 直
vue自定义事件
小钢炮的博客
10-19 825
01 vue中自定义指令 vue指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 02 标准浏览器自定义事件触发方法 w3 Event对象 document.creat...
Vue组件之自定义事件
sunlizhen的专栏
05-10 9766
父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件 事件绑定 　　每个 Vue 实例都实现了事件接口 (Events interface)，即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 　　[注意]Vue 的事件系统分离自浏览器的EventTarget ...
vue.js怎样移除绑定的点击事件？
热门推荐
周清城的博客
08-15 2万+
使用v-on:click绑定的事件如何移除？？？ 现在我的处理方式是: "flag && clickEvent()">p> 加上一个标志位来控制点击事件是否能触发. 也可以这样解决： 采用v-if解决： 点击 点击 然后在data里添加unbind=false属性，需要解绑的时候将其设置为true
VUE事件的动态绑定和解绑
kingroc的博客
03-11 927
@click="!noclick?newUp($event):null" 通过变量noclick来控制是否绑定，如果没有event，可以不带event，但括号必须带。
vue项目笔记（27）-项目优化（解绑全局事件）
从零出发
08-17 854
解绑全局事件 在项目中，我们往往会遇到全局事件的绑定，但是可能只是某一个页面，如果不进行解绑，将会出现各种各样的bug，所以对全局事件进行解绑，很有必要。  实例分析 在项目中，我们在detail/components/Header组件对全局对象window进行了事件绑定，当切换到了其他其他页面的时候，仍然未解除绑定之前，每一个页面都会执行该事件绑定的方法，消耗内存，所以必须解绑全局事件。 ...
[vue] Vue组件绑定自定义事件 子传父（props this.$emit()，this.$ref） 解绑自定义事件 this.$off this.$destroy()
qq_14993591的博客
11-08 1467
基础代码 School.vue <template> <div class="school"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template> <script> export default { name:'School', data() { return { na
vue事件绑定详解
nuanxiasuiyuan的博客
05-31 4358
在上篇中，我们说到了Vue时间绑定用v-on，今天我们就来详细说说。缩写：@修饰符：.stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAl
vue3自定义事件解绑
最新发布
05-27
在Vue3中，可以使用`emits`选项来声明组件所支持的自定义事件，并且可以使用`$off`方法来解绑自定义事件。 假设我们有一个自定义事件`my-event`，它在组件中被触发和监听。我们可以在组件的`emits`选项中声明该事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值