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

2024-08-31 19:28
文章标签 javascript 自定义 组件 vue 事件 案例 修改 frontend localstorage todo

本文主要是介绍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这个属性，就会报错。所以没数据时,给个空数组。

二、组件的自定义事件

(click、keyup这些内置事件是给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传递的是数据，而不是函数，changeTodo和deleteTodo涉及到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)}}

这篇关于Vue(八) localStorage、组件的自定义事件、Todo案例修改的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1124792。

相关文章

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图
阅读更多...
禁止HTML页面滚动的操作方法

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》：本文主要介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性，每种方法都有其适用场景和优缺点，详细内容请阅读本文，希望能对你有所帮助... 在前端开发中，禁止htm
阅读更多...
Vue3中的动态组件详解

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2