Vue2:解绑自定义事件

这篇具有很好参考价值的文章主要介绍了Vue2:解绑自定义事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、场景描述

上一节,我们学习了,自定义事件绑定到组件上。
现在,我们学习下,给组件解绑自定义事件的几种方法。

首先,我们试想一下,这个功能的适用场景?
一般同学都会想,解绑?那就注释掉代码就是了呗。
这个办法也可以,但是,不好,因为每次都要修改代码。

现在,我们实现通过按钮,从页面上给事件解绑。
此时,我们就可以在后台管理系统上,对整个项目的组件进行事件管理。而无需更新代码。

二、解绑自定义事件

Student组件解绑
方式1(推荐)
methods函数:

            unbind(){
                this.$off('test') //解绑一个自定义事件
                this.$off(['test','demo']) //解绑多个自定义事件
                this.$off() //解绑所有的自定义事件
            },

方式2
销毁vc
methods函数:

            death(){
            	//此处的this是Student组件的vc实例
                this.$destroy() //销毁了当前Student组件的实例,销毁后所有Student实例的自定义事件全都不奏效。
            }

方式3(禁用)
销毁vm
main.js中:

new Vue({
	el:'#app',
	render: h => h(App),
	mounted() {
		setTimeout(()=>{
			this.$destroy()		//此处的this是vm
		},3000)
	}
})

三、总结

解绑那个组件上的事件,就在该组件上编写解绑代码。文章来源地址https://www.toymoban.com/news/detail-802293.html

到了这里,关于Vue2:解绑自定义事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2:鼠标触发各类事件

    移动端 pc端 template javascript 如何获取鼠标的x,y坐标 这就要利用事件回调中的 e.targetTouches 属性了。 如何获取鼠标每次移动的差值 当鼠标移动时,如何计算得出,当前鼠标位置与上一次鼠标位置的差值呢? 例如,当前鼠标位置为(1,2),上一次鼠标位置为(0,0),差值就是: x:1,

    2024年04月13日
    浏览(41)
  • Vue2 - 模板、渲染、事件处理、表单输入绑定

    本文内容来自:https://www.bilibili.com/video/BV1Rs4y127j8/ 1、文本 数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值 一般配合 js 中的 data() 设置数据 2、原始 HTML 双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令 3、

    2024年02月16日
    浏览(39)
  • vue2中祖父组件和孙组件事件通信

    1、使用 p a r e n t 属性访问祖父组件,并通过 parent属性访问祖父组件,并通过 p a re n t 属性访问祖父组件,并通过 emit方法触发祖父组件的事件 2、使用provide和inject方法,在祖父组件中提供一个方法或属性,孙组件中通过inject方法获取这个方法或属性,并在孙组件中调用该方

    2024年02月13日
    浏览(74)
  • 【前端vue面试】vue2

    computed 有缓存,基于响应式依赖数据(基于data中声明过或者父组件传递的props中的数据)发生改变,才会重新进行计算 数据变,直接会触发相应的操作 watch监听引用类型,需要添加deep:true深度监听,拿不到oldVal(旧值),因为新值和老值指针相同。 v-show 和v-if 都是做条件隐

    2024年02月08日
    浏览(39)
  • Github 用户查询案例【基于Vue2全局事件总线通信】

            本次案例是一个基于 Vue2 的全局事件总线通信的仿 Github 用户搜索模块,使用的接口是 Github 官方提供的搜索接口: https://api.github.com/search/users?q=xxx(发送请求时需要将输入的用户名称绑定替换掉xxx),如果对全局事件总线不太熟练的小伙伴可以看这篇文章: http:/

    2024年02月03日
    浏览(59)
  • 在vue2中使用SSE(服务器发送事件)

    SSE(Server-Sent Events,服务器发送事件)是围绕只读Comet 交互推出的API 或者模式。 SSE API允许网页获得来自服务器的更新,用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream,而且是浏览器中的JavaScript API 能

    2024年02月11日
    浏览(48)
  • 前端学习--vue2--2--vue指令基础

    写在前面: 前置内容 - vue配置 vue指令只的是带有v-前缀的特殊标签属性 插值表达式{{}}是一种vue模板语法。 利用表达式进行差值,渲染到页面。 表达式可以是被求值的代码,js会计算 不能用差值表达式的 不存在的数据 {{data里面不存在的字段 js {{if}} 标签属性 span id=“

    2024年02月14日
    浏览(40)
  • vue2 自定义指令,插槽

    1.自定义指令 基本语法(全局、局部注册) 指令的值 v-loading的指令封装 2.插槽 默认插槽 具名插槽 作用域插槽 1.指令介绍 内置指令: v-html、v-if、v-bind、v-on … 这都是Vue给咱们内置的一些指令,可以直接使用 自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指

    2024年02月11日
    浏览(44)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • 【Vue2.0源码学习】指令篇-Vue自定义指令

    在 Vue 中,除了 Vue 本身为我们提供的一些内置指令之外, Vue 还支持用户自定义指令。并且用户有两种定义指令的方式:一种是使用全局API—— Vue.directive 来定义全局指令,这种方式定义的指令会被存放在 Vue.options[\\\'directives\\\'] 中;另一种是在组件内的 directive 选项中定义专为

    2024年02月09日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包