当前位置: 首页 > news >正文

web学习笔记(六十二)

目录

1.键盘事件

2.KeepAlive

3.组件传值

3.1 兄弟组件传值

3.2 组件树传值

3.3 发布订阅者传值


1.键盘事件

keydown表示键盘事件,在不加修饰符的情况下,点击键盘上的任意位置都可以触发键盘事件,

<template><div><!-- --><input type="text" @keydown="keyboard" /></div>
</template><script setup>
const keyboard = () => {console.log("触发键盘事件");
};
</script>

       但是通常我们需要点击指定键然后触发相应的事件,此时就需要用到键盘的修饰符了,  也可以链式调用修饰符,表示同时按下对应的键触发键盘事件。以下是常用按键修饰符汇总:

  .enter:

点击enter键触发事件
.tab:点击tab键触发事件
 .delete:点击delete键触发事件
.esc:点击esc键触发事件
.space:点击空格键触发事件
.up:点击向上方向键触发事件
.down:点击向下方向键触发事件
.left:点击向左方向键触发事件
.right:点击向右方向键触发事件
.ctrl: 点击ctrl键触发事件
.alt: 点击alt键触发事件 
 .shift:

 点击shift键触发事件

 .meta: 点击win键触发事件

2.KeepAlive

<KeepAlive> 是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。从而减少dom的操作。

  • KeepAlive希望内部只包含一个组件,当我们需要两个组件频繁切换,但又不希望dom频繁操作而使用KeepAlive时,内部的两个组件成立的条件不可以都写为v-if或v-show,会产生报错。可以写为V-if和v-else,此时KeepAlive会认为无论如何我内部都是只包含一个组件的,此时就不会产生报错
<template><div><button @click="setType('登录')">登录</button><button @click="setType('注册')">注册</button><KeepAlive><comone v-if="type === '注册'"></comone><comtwo v-else></comtwo></KeepAlive><!--此处不可以用两个v-if或两个v-show来判断,都会报错  --></div>
</template><script setup>
import comone from '@/components/comone.vue'
import comtwo from '@/components/comtwo.vue'
import { ref } from 'vue'
const type = ref('登录')
const setType = (v) => {type.value = v
}
</script>
  •  KeepAlive还可以实现页面组件的缓存,需要将KeepAlive组件加载在app.vue文件中,此时KeepAlive的作用是缓存所有的页面组件,此时任何应用页面的小时,对应的组件都不会被销毁。
    <RouterView v-slot="{ Component }"><!-- 这种写法意味着所有的页面组件都被缓存了,任何应该页面的消失,都不会被销毁。 --><KeepAlive><template v-if="Component"><Suspense><!-- 主要内容 --><component :is="Component"></component><!-- 加载中状态 --><template #fallback> 正在加载... </template></Suspense></template></KeepAlive></RouterView>

3.组件传值

3.1 兄弟组件传值

本质就是其中一个子组件将数据传递给父组件,由父组件再传给另一个子组件,本质上还是子传父(复习笔记六十一有详细介绍)

3.2 组件树传值

组件树传值也叫依赖注入,可用解决父组件向某个深层子组件传值的问题,但是一定要注意,这个只能实现父传子的单向传递。

(1)在父组件导入provide ,并且用provide 函数来将需要传给子组件的值注入进去。

import { ref, provide } from 'vue'
const val = ref(0)
provide('number', val)//参数一:注入名(需要和子页面中一致),参数二:需要传递的值,可以是任意类型,也可以是一个响应式数据

(2)在子组件导入 inject ,然后将父组件传过来的值接收一下。

import {inject } from 'vue'
const number = inject('number')//需要和父组件的注入名保持一致

3.3 发布订阅者传值

所有的传值方式都可以用发布订阅者模式来实现。

(1)在集成终端输入: npm i --save pubsub-js来安装pubsub-js包,这是一个专门用来完成发布订阅操作的包,这个包是通用的,Vue、小程序、react、js都可以用

(2)在需要接收数据的组件中将包导入进来 ,然后完成订阅的操作

import PubSub from 'pubsub-js' //导入关注订阅的包
PubSub.subscribe('getcount', (msgName, data) => {console.log(msgName, data)
}) //参数一:关注的消息名,参数二:回调函数,而回调函数的参数一又是关注的消息名,参数二是收到的数据

(3)在需要发布数据的组件将包导入,然后完成订阅操作

import PubSub from 'pubsub-js' //导入关注订阅的包
PubSub.publish('getcount', count.value) //参数一:消息名,参数二:发布的值

相关文章:

web学习笔记(六十二)

目录 1.键盘事件 2.KeepAlive 3.组件传值 3.1 兄弟组件传值 3.2 组件树传值 3.3 发布订阅者传值 1.键盘事件 keydown表示键盘事件&#xff0c;在不加修饰符的情况下&#xff0c;点击键盘上的任意位置都可以触发键盘事件&#xff0c; <template><div><!--…...

每天CTF小练一点--ctfshow年CTF

初一 题目&#xff1a; 2023是兔年&#xff0c;密码也是。聪明的小伙伴们&#xff0c;你能破解出下面的密码吗&#xff1f; 感谢大菜鸡师傅出题 flag格式是ctfshow{xxxxxx}.或许密码也有密码。 密文是&#xff1a; U2FsdGVkX1M7duRffUvQgJlESPfOTV2i4TJpc9YybgZ9ONmPk/RJje …...

Java Set接口 - TreeSet类

TreeSet 是 Java 集合框架中的一个类&#xff0c;它实现了 NavigableSet 接口&#xff0c;而 NavigableSet 是 SortedSet 接口的一个子接口。TreeSet 基于红黑树&#xff08;一种自平衡的二叉搜索树&#xff09;实现&#xff0c;因此它可以保证集合中的元素以升序排列。 以下是…...

css 理解了原理,绘制三角形就简单了

1.border-位置 注意&#xff1a;border-bottom/up/right/left 主要是以三角形的结构搭建而成&#xff0c;而border也是如此。而且从边框的外围开始计算像素尺寸。在理解了这一点之后&#xff0c;绘制三角形就简单多了。 1.transparent 注意&#xff1a;该属性主要是颜色透明…...

【JavaEE进阶】——MyBatis操作数据库 (#{}与${} 以及 动态SQL)

目录 &#x1f6a9;#{}和${} &#x1f388;#{} 和 ${}区别 &#x1f388;${}使用场景 &#x1f4dd;排序功能 &#x1f4dd;like 查询 &#x1f6a9;数据库连接池 &#x1f388;数据库连接池使⽤ &#x1f6a9;MySQL开发企业规范 &#x1f6a9;动态sql &#x1f388…...

电阻应变片的结构

电阻应变片的结构 常用的电阻应变片有金属应变片和半导体应变片两种。金属应变片分为体型和薄膜型。半导体应变片常见的有体型、薄膜型、扩散型、外延型、PN结及其他形式。图2—2所示为工程常见的应变片实物。 电阻应变片的典型结构如图2—3所示。它由敏感栅、基底、覆盖层和引…...

云原生时代:从 Jenkins 到 Argo Workflows,构建高效 CI Pipeline

作者&#xff1a;蔡靖 Argo Workflows Argo Workflows [ 1] 是用于在 Kubernetes 上编排 Job 的开源的云原生工作流引擎。可以轻松自动化和管理 Kubernetes 上的复杂工作流程。适用于各种场景&#xff0c;包括定时任务、机器学习、ETL 和数据分析、模型训练、数据流 pipline、…...

【数据库系统概论】事务

概述 在数据库系统中&#xff0c;事务&#xff08;Transaction&#xff09;是指一组作为单个逻辑工作单元执行的操作。这些操作要么全部成功&#xff08;提交&#xff09;&#xff0c;要么全部失败&#xff08;回滚&#xff09;。事务的主要目的是确保数据库的完整性和一致性&…...

C++-排序算法详解

目录 一. 冒泡排序&#xff1a; 二. 插入排序&#xff1a; 三. 快速排序&#xff1a; 四. 选择排序 五, 归并排序 六, 堆排序. 排序算法是一种将一组数据按照特定顺序&#xff08;如升序或降序&#xff09;进行排列的算法。 其主要目的是对一组无序的数据进行整理&#…...

Kotlin 引用(双冒号::)

文章目录 双冒号::引用函数普通函数成员函数类构造函数 引用变量&#xff08;很少用&#xff09;普通变量成员变量 双冒号:: Kotlin 中可以使用双冒号::对某一变量、函数进行引用。 Note&#xff1a;MyClass::class可用于获取KClass<MyClass>&#xff0c;此时的双冒号::…...

C++ day3练习

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数。 #include <iostream>using namespace std;class Per{private:…...

命令模式(行为型)

目录 一、前言 二、命令模式 三、总结 一、前言 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;命令模式将一个请求封装为一个对象&#xff0c;从而可以用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以…...

韩雪医生针药结合效果好 患者赠送锦旗表感谢

任先生长年献血身体出现不适&#xff0c;身上多处发黑发冷&#xff0c;伴随疼痛&#xff0c;而且还有慢性腹泻的症状。他曾前往苏州各大医馆做过检查&#xff0c;均查不出异常&#xff0c;但身体确实不舒服&#xff0c;面色晦暗。 后来他来到李良济&#xff0c;求诊于韩雪医生。…...

【队列、堆、栈 解释与区分】

文章目录 概要队列&#xff08;Queue&#xff09;定义特性应用场景 堆&#xff08;Heap&#xff09;定义特性应用场景 栈&#xff08;Stack&#xff09;定义特性应用场景 总结 概要 队列、堆和栈是三种常见的数据结构&#xff0c;它们各自具有不同的特性和应用场景。下面是对这…...

NTP网络时间服务器_安徽京准电钟

NTP网络时间服务器_安徽京准电钟 NTP网络时间服务器_安徽京准电钟 概述 NTP网络时间服务器是一款支持NTP和SNTP网络时间同步协议&#xff0c;高精度、大容量、高品质的高科技时钟产品。 NTP网络时间服务器设备采用冗余架构设计&#xff0c;高精度时钟直接来源于北斗、GPS系统中…...

Java:爬虫框架

一、Apache Nutch2 【参考地址】 Nutch 是一个开源Java 实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。 Nutch 致力于让每个人能很容易, 同时花费很少就可以配置世界一流的Web搜索引擎. 为了完成这一宏伟的目标, Nutch必须能够做到…...

ChatGPT基本原理详细解说

ChatGPT基本原理详细解说 引言 在人工智能领域&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是研究的热点之一。随着技术的发展&#xff0c;我们见证了从简单的聊天机器人到复杂的语言模型的演变。其中&#xff0c;ChatGPT作为一项突破性技术&#xff0c;以其强大…...

Java日期时间处理深度解析:从Date、Calendar到SimpleDateFormat

粉丝福利&#xff1a;微信搜索「万猫学社」&#xff0c;关注后回复「电子书」&#xff0c;免费获取12本Java必读技术书籍。 Java中的日期和时间处理 在Java中&#xff0c;日期和时间的处理一直是一个复杂而繁琐的任务。那么&#xff0c;为什么会这样呢&#xff1f;让我们先来看…...

Flutter 中的 CupertinoUserInterfaceLevel 小部件:全面指南

Flutter 中的 CupertinoUserInterfaceLevel 小部件&#xff1a;全面指南 Flutter 是一个功能强大的 UI 框架&#xff0c;由 Google 开发&#xff0c;允许开发者使用 Dart 语言构建跨平台的移动、Web 和桌面应用。在 Flutter 的 Cupertino&#xff08;iOS 风格&#xff09;组件…...

区块链学习记录01

在学习过程中所遇到的问题&#xff0c;及其解。 Q:区块链中分布式账本的存在&#xff0c;让所有人都知道资金的变动吗&#xff1f; A:区块链中的分布式账本确实让参与网络的所有节点都能够了解账户之间的资金变动。这是因为区块链是一个分布式数据库&#xff0c;其中包含着所…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...