目錄

1.鍵盤事件

2.KeepAlive

3.組件傳值

3.1 兄弟組件傳值

3.2 組件樹傳值

3.3 發(fā)布訂閱者傳值

---

1.鍵盤事件

keydown表示鍵盤事件，在不加修飾符的情況下，點(diǎn)擊鍵盤上的任意位置都可以觸發(fā)鍵盤事件，

<template><div><!-- --><input type="text" @keydown="keyboard" /></div>
</template><script setup>
const keyboard = () => {console.log("觸發(fā)鍵盤事件");
};
</script>

? ? ? ?但是通常我們需要點(diǎn)擊指定鍵然后觸發(fā)相應(yīng)的事件，此時(shí)就需要用到鍵盤的修飾符了,? 也可以鏈?zhǔn)秸{(diào)用修飾符，表示同時(shí)按下對應(yīng)的鍵觸發(fā)鍵盤事件。以下是常用按鍵修飾符匯總:

? .enter:	點(diǎn)擊enter鍵觸發(fā)事件
.tab:	點(diǎn)擊tab鍵觸發(fā)事件
?.delete:	點(diǎn)擊delete鍵觸發(fā)事件
.esc:	點(diǎn)擊esc鍵觸發(fā)事件
.space:	點(diǎn)擊空格鍵觸發(fā)事件
.up:	點(diǎn)擊向上方向鍵觸發(fā)事件
.down:	點(diǎn)擊向下方向鍵觸發(fā)事件
.left:	點(diǎn)擊向左方向鍵觸發(fā)事件
.right:	點(diǎn)擊向右方向鍵觸發(fā)事件
.ctrl:	?點(diǎn)擊ctrl鍵觸發(fā)事件
.alt:	?點(diǎn)擊alt鍵觸發(fā)事件?
?.shift:	?點(diǎn)擊shift鍵觸發(fā)事件
?.meta:	?點(diǎn)擊win鍵觸發(fā)事件

2.KeepAlive

<KeepAlive>?是一個(gè)內(nèi)置組件，它的功能是在多個(gè)組件間動(dòng)態(tài)切換時(shí)緩存被移除的組件實(shí)例。從而減少dom的操作。

• KeepAlive希望內(nèi)部只包含一個(gè)組件，當(dāng)我們需要兩個(gè)組件頻繁切換，但又不希望dom頻繁操作而使用KeepAlive時(shí)，內(nèi)部的兩個(gè)組件成立的條件不可以都寫為v-if或v-show，會產(chǎn)生報(bào)錯(cuò)?？梢詫憺閂-if和v-else，此時(shí)KeepAlive會認(rèn)為無論如何我內(nèi)部都是只包含一個(gè)組件的，此時(shí)就不會產(chǎn)生報(bào)錯(cuò)

<template><div><button @click="setType('登錄')">登錄</button><button @click="setType('注冊')">注冊</button><KeepAlive><comone v-if="type === '注冊'"></comone><comtwo v-else></comtwo></KeepAlive><!--此處不可以用兩個(gè)v-if或兩個(gè)v-show來判斷，都會報(bào)錯(cuò)  --></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還可以實(shí)現(xiàn)頁面組件的緩存，需要將KeepAlive組件加載在app.vue文件中，此時(shí)KeepAlive的作用是緩存所有的頁面組件，此時(shí)任何應(yīng)用頁面的小時(shí)，對應(yīng)的組件都不會被銷毀。

    <RouterView v-slot="{ Component }"><!-- 這種寫法意味著所有的頁面組件都被緩存了，任何應(yīng)該頁面的消失，都不會被銷毀。 --><KeepAlive><template v-if="Component"><Suspense><!-- 主要內(nèi)容 --><component :is="Component"></component><!-- 加載中狀態(tài) --><template #fallback> 正在加載... </template></Suspense></template></KeepAlive></RouterView>

3.組件傳值

3.1 兄弟組件傳值

本質(zhì)就是其中一個(gè)子組件將數(shù)據(jù)傳遞給父組件，由父組件再傳給另一個(gè)子組件，本質(zhì)上還是子傳父（復(fù)習(xí)筆記六十一有詳細(xì)介紹）

3.2 組件樹傳值

組件樹傳值也叫依賴注入，可用解決父組件向某個(gè)深層子組件傳值的問題，但是一定要注意，這個(gè)只能實(shí)現(xiàn)父傳子的單向傳遞。

（1）在父組件導(dǎo)入provide?，并且用provide?函數(shù)來將需要傳給子組件的值注入進(jìn)去。

import { ref, provide } from 'vue'
const val = ref(0)
provide('number', val)//參數(shù)一：注入名（需要和子頁面中一致），參數(shù)二：需要傳遞的值，可以是任意類型，也可以是一個(gè)響應(yīng)式數(shù)據(jù)

（2）在子組件導(dǎo)入?inject?，然后將父組件傳過來的值接收一下。

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

3.3 發(fā)布訂閱者傳值

所有的傳值方式都可以用發(fā)布訂閱者模式來實(shí)現(xiàn)。

（1）在集成終端輸入： npm i --save pubsub-js來安裝pubsub-js包，這是一個(gè)專門用來完成發(fā)布訂閱操作的包，這個(gè)包是通用的，Vue、小程序、react、js都可以用

（2）在需要接收數(shù)據(jù)的組件中將包導(dǎo)入進(jìn)來?，然后完成訂閱的操作

import PubSub from 'pubsub-js' //導(dǎo)入關(guān)注訂閱的包
PubSub.subscribe('getcount', (msgName, data) => {console.log(msgName, data)
}) //參數(shù)一：關(guān)注的消息名，參數(shù)二：回調(diào)函數(shù)，而回調(diào)函數(shù)的參數(shù)一又是關(guān)注的消息名，參數(shù)二是收到的數(shù)據(jù)

（3）在需要發(fā)布數(shù)據(jù)的組件將包導(dǎo)入，然后完成訂閱操作

import PubSub from 'pubsub-js' //導(dǎo)入關(guān)注訂閱的包
PubSub.publish('getcount', count.value) //參數(shù)一：消息名,參數(shù)二：發(fā)布的值