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) //参数一：消息名,参数二：发布的值