6体系化Vue再学习——本地存储及自定义事件

本文介绍了浏览器中的localStorage用于本地存储的方法,并探讨了Vue框架中的自定义事件机制,包括事件绑定、触发和解绑。通过自定义事件,实现了子组件向父组件的数据传递。同时,讲解了如何正确处理原生事件,以及在组件中使用$v-on和 .$emit的技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

浏览器本地存储

在浏览器中可通过localStorage进行本地存储。

这里localStorage是window上的属性,则直接调用,不需要再window.

自定义事件

基础事件绑定

我们通过v-on绑定触发事件,这里我们绑定了一个atguigu的事件。通过v-on绑定的事件实际上是在控件的vc上设置了这么一个属性,听过.$emit进行触发。

 那么在这里我们就实现了一个通过自定义事件子给父传递数据。

我们也可以通过直接拿到对象进行设置:这样来说相对灵活一些

解绑事件

单事件解绑:通过.$off 进行解绑

解绑多个事件:通过中括号括起来

 解绑所有自定义事件:

注意:通过this$destroy()销毁组件实例后,对应的事件也就不生效了

原生事件

在组建中想定义@click是不生效的的,

 为了让其生效需要在组建内,通过$emit调用

 虽然click是原生的,但是这里被认为是自定义事件。

对此我们可以通过.native申明是原生的方法。将click点击时间交给student组建最外侧的方法。

 

子组件传递数据给父组件

有了自定义事件,则子组件传值给父组件就可以通过自定义事件处理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值