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