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