Vue 03 组件通信

news2024/11/24 10:57:22

Vue学习

  • Vue 03
    • 01 浏览器本地存储
      • localStorage
      • SessionStorage
      • 案例 todolist的完善
    • 02 组件自定义事件Custom Events
      • 基本使用
      • 解绑自定义事件
      • 注意事项
        • ①
        • ②
      • 总结
      • 案例 todolist的完善
    • 03 全局事件总线GlobalEventBus
      • 案例 todolist的完善
    • 04 消息的订阅与发布
      • 案例 todolist的完善
    • 05 nextTick
    • 06 动画效果
      • 基本使用
      • 多个元素过渡
      • 第三方库 Animate.css
      • 总结

Vue 03

01 浏览器本地存储

localStorage 和 SessionStorage 统称为 webStorage。

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

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

  3. 相关API:

    setItem、getItem、removeItem、clear

  4. 备注

① SessionStorage 存储的内容会随着浏览器窗口关闭而消失。

② LocalStorage 存储的内容，需要手动清除才会消失。

③ xxxxxStorage.getItem(xxx) 如果xxx对应的value获取不到，那么getltem的返回值是null。

④ JSON.parse(null) 的结果依然是 null。

localStorage

在这里插入图片描述

  • 示例
<body>
  <h1>localStorage</h1>
  <button class="btn">点我保存一个数据</button>
  <button class="btn2">点我删除一个数据</button>
  <button class="btn3">点我清空数据</button>
</body>
<script>
  let p = {name:'张三',age:16}

  document.querySelector('.btn').addEventListener('click',()=>{
    //存字符串
    window.localStorage.setItem('msg', 'hello!')
    // 存对象
    localStorage.setItem('person',JSON.stringify(p))

    // 读
    // localStorage.getItem('msg')
    console.log(localStorage.getItem('msg'));
    console.log(localStorage.getItem('person'));
    console.log(JSON.parse(localStorage.getItem('person')));
    // 当读取的key没有时，是null
  })

  document.querySelector('.btn2').addEventListener('click',()=>{
    //删除
    localStorage.removeItem('msg')
  })

  document.querySelector('.btn3').addEventListener('click',()=>{
    localStorage.clear()
  })
</script>

SessionStorage

API 和 localStorage 一样。getItem、SetItem、removeItem、clear（JSON.stringify、JSON.parse）

区别在关闭浏览器时，SessionStorage中存储的就失去

案例 todolist的完善

把数据存进localstorage中。本来是想 添加todo的时候，存入localstorage；删除todo的时候，在localstorage中删除。

但是不用这么麻烦，直接watch监视todos就可以了。

注意：监视的时候默认开启的不是深度监视

02 组件自定义事件Custom Events

JS 中的内置事件，如 keyup、click等，是给HTML元素使用的

自定义事件是给组件使用的。

基本使用

  • 示例

在这里插入图片描述

在这里插入图片描述

  • 另一种写法（这种写法更灵活）

在这里插入图片描述

子组件给父组件传递数据 总结：

① 通过父组件给子组件传递函数类型的props实现

② 通过父组件给子组件绑定一个自定义事件

注意

① 自定义事件也可以使用事件修饰符，比如 once

② 自定义事件可以传递参数。如果传递的参数很多，可以封装为对象，或者接收的时候，用拓展运算符

解绑自定义事件

原则和绑定自定义事件是一样的：在App.vue中给<Student/>组件绑定自定义事件，就去 <Student/>组件中触发事件、解绑事件

  • 示例

写法一：只适用于解绑单个事件
在这里插入图片描述

写法二：解绑多个事件要写在数组里

在这里插入图片描述

解绑所有的自定义事件：

在这里插入图片描述

补充之前的知识点：生命周期里面，销毁了当前组件实例，其实例里面的自定义事件（子组件和自组件的自定义事件）全部都不奏效了。但是原生的 JS 不受影响。

注意事项

App

school

student

①
  • student组件把名字发送给App后呈现在页面上，

因为绑定自定义事件有两种凡是，所以这个也有两种方式

在这里插入图片描述

在这里插入图片描述

但是上面的代码可能会出现问题。
在这里插入图片描述

这么写是错的.

vue规定，谁触发 atguigu 事件，那么回调函数中的 this 就是谁。本例是 student 组件触发的事件，所以this是student组件实例。

修改为箭头函数就可以了，因为箭头函数没有自己的this，就往外找，找到了 mounted函数的作用域

在这里插入图片描述

②

可以给组件绑定 JS 内置事件吗？
在这里插入图片描述

他会默认把click当成自定义事件。

默认是不触发的，但是可以在 student 组件中触发这个事件 this.$emit(‘click’)。

解决方法：使用native修饰符

在这里插入图片描述

总结

组件的自定义事件

1、一种组件间通信的方式，适用于：子组件===>父组件

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

3、绑定自定义事件：

在这里插入图片描述

注意：若想让自定义事件只能触发一次，可以使用once修饰符，或 $once方法。

4、触发自定义事件：this.$emit(‘atguigu’,数据)

5、解绑自定义事件：this.$off(‘atguigu’)

6、组件上也可以绑定原生DOM事件，需要使用native修饰符

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

案例 todolist的完善

把所有子给父的传递 都变成自定义事件。

MyHeader添加一个todo之后，把新数据传递给 App

MyFooter中统计已完成/总计，把新数据传递给App

03 全局事件总线GlobalEventBus

任意组件通信。

在A中 给 X组件绑定一个自定义事件，会议回调函数demo是留在A中的。

D想给A传递数据，那就通过X demo

在这里插入图片描述

X得保证①所有组件都能看见它②有$on $off $emit

《一个重要的内置关系》 Vue的原型上

注意 Vue.extned创建的是 VueComponent构造函数，使用组件的时候：<组件>，才是实例

谁要接收数据，就由谁绑定事件且余留回调函数。谁要发送数据，就由谁触发事件。

全局事件总线 GlobalEventBus

1、一种组件间通信的方式，适用于任意组件间通信

2、安装全局事件总线：

在这里插入图片描述

3、使用事件组件：

在这里插入图片描述

4、最好在 beforeDestroy 钩子中，用$off 去解绑当前组件所用到的 事件

案例 todolist的完善

谁要接收数据，就由谁绑定事件且余留回调函数（在mounted的时候绑定最合适）。谁要发送数据，就由谁触发事件。

04 消息的订阅与发布

Publish–subscribe pattern

用于任意组件通信。

需要数据的组件：订阅消息。提供数据的组件：发送消息。

原生的 JS 里面不能实现订阅与发布，所以借助第三方库：pubsub-js。消息的订阅与发布是一种理念，要借助第三方库实现。

  • 以pubsub-js为例

npm i pubsub-js

import pubsub from 'pubsub-js'

pubsub 是一个对象，里面有方法 subscribe、 unsubscribe、 publish

在这里插入图片描述
在这里插入图片描述

  • 这里订阅消息时 的回调函数function 内没有this指针，可以写成箭头函数，这样this就指向组件实例了。
  • 回调函数的参数，第一个是固定的 消息名字；第二个才是参数 。可以在一个参数上用下划线占一个位置。

总结：消息订阅与发布（pubsub）

1、一种组件间通信的方式、适用于任意组件间通信

2、使用步骤：

① 安装pubsub npm i pubsub-js

② 引入import pubsub from 'pubsub-js'。一般第三方库要比组件库的引入前。

③ 接收数据：A组件想接收数据，则在A中订阅消息，消息的回调留在A中

在这里插入图片描述

④ 提供数据：pubsub.publish('xxx',数据)

⑤ 最好在 beforeDestroy 钩子中，用 PubSub.unsubscribe(pid) 去 取消订阅

案例 todolist的完善

  • 订阅功能

需要数据的地方订阅消息；提供数据的地方发送消息

vue开发工具不监测第三方库的事件，vue可以监听全局事件总线、自定义事件

  • 编辑功能

重点：直接在对象上添加一个属性，这个数据不是响应式的，vue无法监测

要使用 this.$set(todo,‘isEdit’,true)

05 nextTick

  • 编辑功能的输入框焦点

在这里插入图片描述

这一段的逻辑是，在点击了编辑按钮之后 input输入框出现，且该输入框得到焦点。

但是不起效，因为执行代码的时候从上到下执行完毕之后才解析模板，也就是在当页面上没有输入框的时候，就已经设置了焦点。

解决方法，可以设置一个定时器

在这里插入图片描述

更好的解决方法：

官方设置了一个API ，nextTick，它所维护的回调会在DOM节点更新完毕后再执行

在这里插入图片描述

  • nextTick 总结

作用：在下一次QOM更新结束后执行其指定的回调。

什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

06 动画效果

基本使用

在这里插入图片描述
在这里插入图片描述

  • 利用vue

在这里插入图片描述

  • 注：每一个过度transition可以起名字

在这里插入图片描述

  • 让最开始的时候就有动画，设置 appear属性为TRUE，这里要写v-bind，因为如果是 apper="true"表示的是字符串，v-bind:appear="true"才是等于双引号内的值
    在这里插入图片描述

  • 用vue写动画（之前是用CSS3写的）

一个元素向我们来的时候，vue规定了三个样式类名：来的起点、来的终点、来的过程。走的时候也是三个样式类名。

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="hello">
      <h1 v-show="isShow">你好啊</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'MyTest',
  data(){
    return {
      isShow: true
    }
  }
}
</script>

<style>
h1 {
  background-color: orange;
  /* 激活样式 方法一 */
  /* 哪个元素有动画就在哪里写transition */
  /* transition: 0.5s linear; */
}
/* 激活样式方法二 */
.hello-enter-active .hello-leave-active{
  transition: 0.5s linear;
}

/* 进入的起点和离开的重点是一样的 */
.hello-enter .hello-leave-to{
  transform: translateX(-100%);
}

/* 进入的终点和离开的起点一样 */
.hello-enter-to .hello-leave {
  transform: translateX(0);
}

</style>

多个元素过渡

<transition>can only be used on a single element. Use <transition-group>for lists.

<transition-group>children must be keyed

在这里插入图片描述

第三方库 Animate.css

文档地址：https://animate.style/

①安装：npm install animate.css

② 引入，因为引入的是样式，所以import后面直接加上路径

在这里插入图片描述

总结

Vue封装的过度与动画

1、作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

2、图示：

在这里插入图片描述

3、写法

① 准备好样式

元素进入的样式
v-enter 进入的起点
v-enter-active 进入过程中
v-enter-to 进入的终点

元素离开的样式
v-leave 离开的起点
v-leave-active 离开过程中
v-leave-to 离开的重点

② 使用 <transition>包裹要过度的动画，并配置name属性

③ 备注：如果有多个元素需要过度，则需要使用 <transition-group>，且每个元素都要指定 key值。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

go的通信Channel

go的通信Channel

go的通道channel是用于协程之间数据通信的一种方式 一、channel的结构 go源码&#xff1a;GitHub - golang/go: The Go programming language src/runtime/chan.go type hchan struct {qcount uint // total data in the queue 队列中当前元素计数&#xff0c;…
阅读更多...
设计模式-设配器模式

设计模式-设配器模式

目录 &#x1f38a;1.适配器模式介绍 &#x1f383;2.适配器类型 &#x1f38f;3.接口适配器 &#x1f390;4.类的适配器 &#x1f38e;5.优缺点 1.适配器模式介绍 适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁。这种类型的设…
阅读更多...
进阶了解C++(6)——二叉树OJ题

进阶了解C++(6)——二叉树OJ题

Leetcode.606.根据二叉树创建字符串&#xff1a; 606. 根据二叉树创建字符串 - 力扣&#xff08;LeetCode&#xff09; 难度不大&#xff0c;根据题目的描述&#xff0c;首先对二叉树进行一次前序遍历&#xff0c;即&#xff1a; class Solution { public:string tree2str(Tr…
阅读更多...
【管理咨询宝藏59】某大型汽车物流战略咨询报告

【管理咨询宝藏59】某大型汽车物流战略咨询报告

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏59】某大型汽车物流战略咨询报告 【格式】PDF 【关键词】HR调研、商业分析、管理咨询 【核心观点】 - 重新评估和调整商业模式&#xff0c;开拓…
阅读更多...
代码随想录——移除元素（Leetcode27）

代码随想录——移除元素（Leetcode27）

题目链接 暴力&#xff1a;&#xff08;没有改变元素相对位置&#xff09; class Solution {public int removeElement(int[] nums, int val) {int len nums.length;for(int i 0; i < len; i){if(nums[i] val){for(int j i 1; j < len; j){nums[j-1] nums[j];}i…
阅读更多...
ESCTF-密码赛题WP

ESCTF-密码赛题WP

*小学生的爱情* Base64解码获得flag *中学生的爱情* 社会主义核心价值观在线解码得到flag http://www.atoolbox.net/Tool.php?Id850 *高中生的爱情* U2FsdG开头为rabbit密码,又提示你密钥为love。本地toolfx密码工具箱解密。不知道为什么在线解密不行。 *大学生的爱情* …
阅读更多...
LLM - 大语言模型的指令微调(Instruction Tuning) 概述

LLM - 大语言模型的指令微调(Instruction Tuning) 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/137009993 大语言模型的指令微调(Instruction Tuning)是一种优化技术&#xff0c;通过在特定的数据集上进一步训练大型语言模型(LLMs)&a…
阅读更多...
STM32 PWM通过RC低通滤波转双极性SPWM测试

STM32 PWM通过RC低通滤波转双极性SPWM测试

STM32 PWM通过RC低通滤波转双极性SPWM测试 &#x1f4cd;参考内容《利用是stm32cubemx实现双极性spwm调制 基于stm32f407vet6》&#x1f4fa;相关视频链接&#xff1a;https://www.bilibili.com/video/BV16S4y147hB/?spm_id_from333.788 双极性SPWM调制讲解以及基于stm32的代码…
阅读更多...
线程的状态：操作系统层面和JVM层面

线程的状态：操作系统层面和JVM层面

在操作系统层面&#xff0c;线程有五种状态 初始状态&#xff1a;线程被创建&#xff0c;操作系统为其分配资源。 可运行状态(就绪状态)&#xff1a;线程被创建完成&#xff0c;进入就绪队列&#xff0c;参与CPU执行权的争夺。或因为一些原因&#xff0c;从阻塞状态唤醒的线程…
阅读更多...
Deno 1.42：使用 JSR 更好地进行依赖管理

Deno 1.42：使用 JSR 更好地进行依赖管理

3 月 28 日&#xff0c;Deno 宣布 1.42 版本正式推出。Deno 的愿景是简化编程&#xff0c;其中一个重要方面就是管理依赖关系。虽然 npm 已发展成为最成功的开源注册表&#xff0c;但使用和发布模块却变得越来越复杂。 基于 npm 的成功&#xff0c;JSR 提供​​了一个现代化的…
阅读更多...
如何使用PMKIDCracker对包含PMKID值的WPA2密码执行安全测试

如何使用PMKIDCracker对包含PMKID值的WPA2密码执行安全测试

关于PMKIDCracker PMKIDCracker是一款针对无线网络WPA2密码的安全审计与破解测试工具&#xff0c;该工具可以在不需要客户端或去身份验证的情况下对包含了PMKID值的WPA2无线密码执行安全审计与破解测试。 PMKIDCracker基于纯Python 3开发&#xff0c;旨在帮助广大安全研究人员…
阅读更多...
MongoDB副本集环境搭建（以单机Windows为例）

MongoDB副本集环境搭建（以单机Windows为例）

前言 近期有搭建MongoDB副本集的需求，简单记录一下搭建过程（以本地Windows环境为例）。 一、副本集选型 1 Primary节点、1 Secondary 节点、1 Arbiter节点模式副本集环境搭建。 二、搭建过程 1. 安装MongoDB服务 下载地址：https://www.mongodb.com，如下图所示： 选择…
阅读更多...
sonar+gitlab提交阻断 增量扫描

sonar+gitlab提交阻断 增量扫描

通过本文&#xff0c;您将可以学习到 sonarqube、git\gitlab、shell、sonar-scanner、sonarlint 一、前言 sonarqube 是一款开源的静态代码扫描工具。 实际生产应用中&#xff0c;sonarqube 如何落地&#xff0c;需要考虑以下四个维度&#xff1a; 1、规则的来源 现在规则的…
阅读更多...
HTTP，Servlet

HTTP，Servlet

HTTP 概念&#xff1a;HyperTextTransferProtocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则 HTTP协议特点&#xff1a; 1.基于TCP协议&#xff1a;面向连接&#xff0c;安全 2.基于请求-响应模型的&#xff1a;一次请求对应一次响应 …
阅读更多...
【数据挖掘】实验5：数据预处理（2）

【数据挖掘】实验5：数据预处理（2）

验5&#xff1a;数据预处理&#xff08;2&#xff09; 一&#xff1a;实验目的与要求 1&#xff1a;熟悉和掌握数据预处理&#xff0c;学习数据清洗、数据集成、数据变换、数据规约、R语言中主要数据预处理函数。 二&#xff1a;实验知识点总结 1&#xff1a;数据集成是将多个…
阅读更多...
基于jsp+mysql+Spring+hibernate+的SSH在线学习交流论坛平台

基于jsp+mysql+Spring+hibernate+的SSH在线学习交流论坛平台

基于jspmysqlSpringhibernate的SSH在线学习交流论坛平台 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末…
阅读更多...
如何在Windows 10中打开屏幕键盘？这里有详细步骤

如何在Windows 10中打开屏幕键盘？这里有详细步骤

本文解释了在Windows 10中打开或关闭屏幕键盘的不同方法&#xff0c;还解释了如何将屏幕键盘固定到开始菜单。 使用屏幕键盘的快捷键 如果你喜欢快捷方式&#xff0c;你会喜欢这个&#xff1a;按物理键盘上的WinCTRLO。这将立即显示屏幕键盘&#xff0c;而无需通过轻松使用。…
阅读更多...
Pytorch复现 Transformer cssdn

Pytorch复现 Transformer cssdn

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f366; 参考文章&#xff1a;TensorFlow入门实战&#xff5c;第3周&#xff1a;天气识别&#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 一、多头注意力机制 import torch import…
阅读更多...
ElementUI表格table组件实现单选及禁用默认选中效果

ElementUI表格table组件实现单选及禁用默认选中效果

在使用ElementUI&#xff0c;需要ElementUI表格table组件实现单选及禁用默认选中效果, 先看下效果图&#xff1a; 代码如下&#xff1a; <template><el-tableref"multipleTable":data"tableData"tooltip-effect"dark"style"widt…
阅读更多...
Linux根据时间删除文件或目录

Linux根据时间删除文件或目录

《liunx根据时间删除文件》和 《Linux 根据时间删除文件或者目录》已经讲述了根据时间删除文件或目录的方法。 下面我做一些补充&#xff0c;讲述一个具体例子。以删除/home目录下的文件为例。 首先通过命令&#xff1a; ls -l --time-style"%Y-%m-%d %H:%M:%S"…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023