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)
	}
})

三、总结

解绑那个组件上的事件,就在该组件上编写解绑代码。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值