Vue(八) localStorage、组件的自定义事件、Todo案例修改

文章目录

  • 一、浏览器本地存储
    • 1. 相关API
    • 2. Todo案例中的应用
  • 二、组件的自定义事件
    • 1. 回顾props传值方式
    • 2. 绑定自定义事件
      • (1)方式一:v-on或@
      • (2)方式二: ref
    • 3. 解绑自定义事件
    • 4. 注意点
    • 总结
  • 三、Todo案例采用自定义事件

一、浏览器本地存储

1. 相关API

  1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API:

    1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数,返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数,并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

  4. 备注:

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容,存储在本地硬盘里,需要手动清除才会消失(clear或者手动清除)
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。
    5. xxxStorage里只能存储字符串,因此存储对象时,需借助JSON.stringfy()将对象转化为字符串进行存储。读取时,需借助JSON.parse()将读出来的字符串转为对象。

2. Todo案例中的应用

  1. 什么时候存:todo被增加、删除、修改时。
  2. 在哪里进行操作:如果是在todos的增删改的监听事件里进行存储,太麻烦。最好的方式是用watch,无论对todos进行任何的增删改查操作,只要todos发生变化,就将最新的todos重新存一份。
  3. 什么时候读取:data里数据初始化时。
// App.vuedata () {return {// 为什么要或一个空数组[]todos: JSON.parse(localStorage.getItem('todos')) || []}},watch: {todos: {deep: true, // 开启深度监视,监视到todos里某一个对象里面的属性的变化。// 若不开启深度监视,只能检测到todos里每一个对象的增加或删除,eeeehandler (value) {localStorage.setItem('todos', JSON.stringify(value))}}},

(为什么要或空数组[]) 答: 最开始是没有数据的,此时读取数据为null,JSON转完对象后也为null,而footer中用到todos.length, null没有length这个属性,就会报错。所以没数据时,给个空数组。


二、组件的自定义事件

(clickkeyup这些内置事件是给html元素用的。此处的自定义事件是给组件用的。)
通过子组件给父组件传值来举例自定义事件:
在这里插入图片描述
需求:(1) 发送学校名称给App组件,采用props的方式。(2)发送学生名称给App组件,采用自定义事件的方式

1. 回顾props传值方式

父组件向子组件传递函数,子组件调用这个函数,向父组件传值

父组件:App.vue

<!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据-->
<School :getSchoolName="getSchoolName"></School>
...
<script>
methods:{getSchoolName (schoolName) {console.log('App接收到了学校名称为:' + schoolName);}
}
</script>
...

子组件:School.vue

 <button @click="sendSchoolName">发送学校名称给APP</button>
<script>
...props: ['getSchoolName'],methods: {sendSchoolName () {// 调用父组件传递过来的方法this.getSchoolName(this.name)}},...
</script>

在这里插入图片描述

2. 绑定自定义事件

(1)方式一:v-on或@

<!-- 通过父组件给子组件绑定一个自定义事件实现(使用@/v-on):子给父传递数据-->
<Student @sendMsg="getStuName"></Student>
<!--如果只调用一次,once修饰符仍可用-->
<!-- <Student @sendMsg.once="getStuName"></Student> -->
<script>...getStuName (stuName,...a) {console.log('App接收到了学生名称为:', stuName, a);},...
</script>

@(或v-on)在Student标签身上,所以给Student的组件实例对象vc身上绑定了一个名为sendMsg的事件,当触发sendMsg事件时,getStuName事件就会被调用。

接下里的问题是:如何触发sendMsg事件?
由于是给Student组件的实例对象绑定的这个sendMsg事件,所以触发也应该发生在Student组件的实例对象(vc)里。

触发事件$emit('要触发的事件',参数1,参数2,...)

<!--Student组件-->
<button @click="sendStuName">发送学生名称给App</button>
<script>...sendStuName () {// 通过this拿到Student组件的实例对象,// 触发Student组件实例身上的sendMsg事件this.$emit('sendMsg', this.name, 666, 888)}...
</script>

在这里插入图片描述

(2)方式二: ref

通过refs获取到组件实例对象

<!--App组件-->
<!-- 通过父组件给子组件绑定一个自定义事件实现(ref):子给父传递数据-->
<Student ref="student"></Student>
<script>methods: {getStuName (stuName,...a){console.log('App接收到了学生名称为:', stuName, a);}},// 生命周期函数mounted () {console.log('mounted')// this.$refs.student 获取到student的组件实例对象// 当sendMsg被触发时,执行回调函数getStuNamethis.$refs.student.$on('sendMsg', this.getStuName)}
</script>

可实现同样的效果。
需要注意的是,自定义事件的两种方式:@/v-on 与ref 指的是绑定自定义事件的两种方式。无论哪种绑定方式,Student组件里触发事件使用的都是$emit
在这里插入图片描述
ref的方式要更灵活一点,比如要求App组件挂载之后,等5s,再给Student组件实例绑定事件。而@/v-on的方式则实现不了。

3. 解绑自定义事件

哪个组件绑定了事件,就在哪个组件里解绑

语法:

  • 组件实例.$off('事件名'):解绑一个事件
  • 组件实例.$off(['事件名1','事件名2']):解绑两个事件
  • 组件实例.$off():解绑所有事件
<!--Student组件-->
<button @click="unbind">解绑</button>
...
<script>unbind () {this.$off('sendMsg')  // 解绑一个事件},
</script>

4. 注意点

1、当$destory()时,组件实例被销毁,销毁后该组件实例的自定义事件全都不再奏效。

2、$refs回调函数
需求:将App组件将收到的学生姓名展示在页面上
在这里插入图片描述
解决:

<template><div class="app"><h2>{{ msg }},学生姓名为:{{ stuName }}</h2></div>
</template>

通过this.$refs.xxx.$on('事件名',回调函数)绑定自定义事件时,回调要么配置在methods中

   methods:{getStuName (stuName,...a){console.log('App接收到了学生名称为:', stuName, a);// 需要data里的数据接收一下this.stuName = stuName}},mounted () {this.$refs.student.$on('sendMsg', this.getStuName)}

要么用箭头函数

  mounted () {this.$refs.student.$on('sendMsg', (stuName,...a) => {console.log('App接收到了学生名称为:', stuName, a);// 此处的this指向App实例this.stuName = stuName})}

如果不用箭头函数,this指向会出问题

mounted () {this.$refs.student.$on('sendMsg', function (stuName,...a) {console.log('App接收到了学生名称为:', stuName, a);// 此处的this指的不是App组件,而是Student组件实例this.stuName = stuName})}

3、组件上写的v-on都会被当成自定义事件,即便是写点击事件@click也会当成自定义事件,想要用原生DOM事件的话,需要加native

<Student ref="student" @click.native="show"></Student>
<script>show () {console.log('组件采用原生点击事件');}
</script>

总结

  1. 一种组件间通信的方式,适用于:子组件 ===> 父组件

  2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。

  3. 绑定自定义事件:

    (1) 第一种方式,在父组件中:<Demo @atguigu="test"/><Demo v-on:atguigu="test"/>

    (2)第二种方式,在父组件中:

    <Demo ref="demo"/>
    ......
    mounted(){this.$refs.xxx.$on('atguigu',this.test)
    }
    
  4. 若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。

  5. 触发自定义事件:this.$emit('atguigu',参数)

  6. 解绑自定义事件this.$off('atguigu')

  7. 组件上也可以绑定原生DOM事件,需要使用native修饰符。

  8. 注意:通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!

三、Todo案例采用自定义事件

此处只关注子组件向父组件传值的地方,即MyHeader与MyFooter向父组件App传值的地方
(MyList中:todos传递的是数据,而不是函数,changeTododeleteTodo涉及到App与App孙子组件的事儿,此处不进行探讨)
在这里插入图片描述
App组件中:

<MyHeader @addTodo="addTodo"></MyHeader>
<MyFooter:todos="todos"@checkAllTodo="checkAllTodo"@clearAllTodo="clearAllTodo"
></MyFooter>

MyHeader里:

 // this.addTodo(todoObj)this.$emit('addTodo', todoObj)

同理MyFooter中

    clearAll () {// this.clearAllTodo()this.$emit('clearAllTodo')}isAll: {get () {return this.doneTotal === this.total && this.total > 0},set (value) {// this.checkAllTodo(value)this.$emit('checkAllTodo', value)}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/413297.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法复盘——LeetCode hot100:哈希

文章目录 哈希表哈希表的基本概念哈希表的使用1. 插入操作2. 查找操作3. 删除操作 哈希表的优点和缺点1.两数之和复盘 242.有效的字母异位词复盘 49.字母异位词分组复盘 128. 最长连续序列复盘HashSet 哈希表 先来搞清楚什么是哈希表吧~ 概念不清楚方法不清楚怎么做题捏 哈希表…

c++习题28-计算2的N次方

目录 一&#xff0c;题目 二&#xff0c;思路 三&#xff0c;代码 一&#xff0c;题目 描述 任意给定一个正整数N(N<100)&#xff0c;计算2的n次方的值。 输入描述 输入一个正整数N。 输出描述 输出2的N次方的值。 用例输入 1 5 用例输出 1 32 二&#xff0…

【王树森】Transformer模型(2/2): 从Attention层到Transformer网络(个人向笔记)

Single Head Self-Attention 上节课讲到的属于单头注意力&#xff1a; Multi-Head Self-Attention 使用 l l l 个单头注意力层堆叠成一个多头注意力层&#xff0c;注意它们之间不共享参数一个单头注意力有 3 个参数矩阵&#xff0c;所以多头注意力有 3 l 3l 3l 个参数矩阵…

docker文档

一、docker概述 1、java项目通过docker打包成镜像&#xff08;包含了所有的环境&#xff09;放到docker仓库中&#xff0c;只需要下载发布的镜像直接运行即可&#xff1b; 2、虚拟机技术的缺点&#xff1a; 资源占用多、冗余步骤多、启动很慢 容器化技术&#xff1a; 比较do…

色彩与笔触的交响:广州米塔在线科教技术有限公司揭秘PS绘画秘籍!

在数字艺术的广阔天地里,PS无疑是一颗璀璨的明星&#xff0c;它不仅在图像处理领域独领风骚&#xff0c;更以其强大的功能成为了众多艺术家和设计师进行数字绘画的首选工具。广州米塔在线科教技术有限公司&#xff0c;作为致力于艺术教育与技术分享的平台&#xff0c;深知掌握P…

RNN及其变体

RNN及其变体 RNN模型定义 循环神经网络:一般接受的一序列进行输入,输出也是一个序列 作用和应用场景: RNN擅长处理连续语言文本,机器翻译,文本生成,文本分类,摘要生成 RNN模型的分类 根据输入与输出结构 N Vs N : 输入和输出等长,应用场景:对联生…

科技改变搜索习惯:Anytxt Searcher,重新定义你的信息获取方式!

前言 史蒂夫乔布斯所言&#xff1a;“创新就是把事物联系起来的能力”。这种能力不仅推动了全球科技的飞速发展&#xff0c;也深刻影响着我们的日常生活方式。在这样的背景下&#xff0c;一款名为Anytxt Searcher的本地数据全文搜索引擎应运而生&#xff0c;它以其独特的功能和…

【Android】使用 ADB 查看 Android 设备的 CPU 使用率

目录 一 查看整体CPU使用率 1 top 二 查看特定应用的CPU使用率 1 获取特定应用的进程 ID (PID) 2 使用 top 命令并过滤该 PID 三 常见的CPU相关命令参数 1 adb shell top 参数 一 查看整体CPU使用率 1 top top命令将显示当前所有进程的 CPU 使用情况&#xff0c;包括每…

【Datawhale AI夏令营】从零上手CV竞赛Task3

文章目录 前言一、数据集增强二、设置 YOLO 模型训练参数三、模型微调总结 前言 本文的Task3对Task1的baseline代码继续进行优化的过程。 一、数据集增强 数据增强是机器学习和深度学习中常用的技术&#xff0c;用于通过从现有数据集中生成新的训练样本来提高模型的泛化能力。…

gitee版本控制

前置要求&#xff1a; 安装Git git下载地址&#xff1a;https://git-scm.com/download/win 注册gitee gitee官网&#xff1a;Gitee - 基于 Git 的代码托管和研发协作平台 创建普通项目 目录 git推送远程仓库基本操作 克隆仓库到本地 项目上传 版本管理 分支管理版本…

基于ssm的实习课程管理系统/在线课程系统

实习课程管理系统 摘 要 互联网的快速发展&#xff0c;给各行各业带来不同程度的影响&#xff0c;悄然改变人们的生活、工作方式&#xff0c;也倒逼很多行业创新和变革&#xff0c;以适应社会发展的变化。人们为了能够更加方便地管理项目任务&#xff0c;实习课程管理系统被人们…

55.基于IIC协议的EEPROM驱动控制(2)

升腾A7pro的EEPROM芯片为24C64芯片&#xff0c;器件地址为1010_011。 &#xff08;1&#xff09;Visio整体设计视图&#xff08;IIC_SCL为250KHz&#xff0c;IIC_CLK为1MHz&#xff0c;addr_num为1&#xff0c;地址字节数为2字节&#xff0c;addr_num为0&#xff0c;地址字节数…

产品经理的学习笔记(全集)-持续更新

1.前言 产品经理不是一个软件&#xff0c;也不是一个专业技能&#xff0c;是一个思维量变的过程&#xff1b;内容介绍&#xff1a;P1-产品经理基础认知&#xff1b;P2-从0-1搭建实战项目&#xff08;电商&#xff09; 2.产品经理基础 2.1产品经理定义 产品管理--产品的设计…

【手撕数据结构】二叉树oj题

目录 单值二叉树题目描述题目思路及代码 相同的树题目描述题目思路及代码 对称二叉树题目描述题目思路及代码 另一棵树的子树题目描述题目思路及代码 二叉树的前序遍历题目描述题目思路及代码 二叉树的构建与遍历题目描述题目思路及代码 单值二叉树 题目描述 题目思路及代码 …

SAP LE学习笔记07 - MM与WM跨模块收货到仓库的流程中 如何实现 先上架再入库

上一章讲了LE中收货的一些特殊情况&#xff1a; 1&#xff0c;MM模块收货时&#xff0c;特别移动指标来标识的物料直接产生TO 2&#xff0c;MM中直接收货到仓库的固定Storage Bin(棚番)上 SAP LE学习笔记06 - MM与WM跨模块收货到仓库的流程中 带特别移动指标的物料也可以直接…

怎么将日常的文件做成二维码?文件二维码的在线转换方法

文件做成二维码来展示的应用场景越来越多&#xff0c;可以通过二维码在存储文件的同时&#xff0c;提供文件预览以及下载服务&#xff0c;并且二维码没有时效限制&#xff0c;能够长期提供内容展示服务&#xff0c;更符合现在的展示需求。那么文件生成二维码比较简单的方法可以…

黑屏环境下,如何利用OBD部署OceanBase企业版集群

一、前言 OBD&#xff0c;作为OceanBase官方推出的部署工具&#xff0c;显著简化了OB单机及集群的部署流程。此前&#xff0c;OBD能够支持对社区版OB进行一键部署&#xff0c;那OBD是否同样支持OB企业版的部署呢&#xff1f; 本文为大家介绍通过OBD&#xff0c;在OB企业版集群…

(最新)华为 2024 届秋招-硬件技术工程师-单板硬件开发—机试题—(共12套)(每套四十题)

&#xff08;最新&#xff09;华为 2024 届秋招-硬件技术工程师-单板硬件开发—机试题—&#xff08;共12套&#xff09;&#xff08;每套四十题&#xff09; 岗位——硬件技术工程师 岗位意向——单板硬件开发 真题题目分享&#xff0c;完整版带答案(有答案和解析&#xff0…

「青鸟」作家导演起飞计划,助人才转型,共铸电影市场新活力

2024年6月&#xff0c;《上海市电影高质量发展三年行动计划》发布「青鸟」作家导演起飞计划应运而生&#xff08;下文简称「青鸟计划」&#xff09;。作为全国首个协助作家跨界转型、用画面讲好故事的扶持平台&#xff0c;青鸟计划重视电影的文学性&#xff0c;通过专业人士搭建…

关于lua调用DLL的c/c++动态库(相关搜索:数据库)

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…