目錄

1.鍵盤事件

2.KeepAlive

3.組件傳值

3.1 兄弟組件傳值

3.2 組件樹傳值

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

---

1.鍵盤事件

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

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

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

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

2.KeepAlive

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

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

<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還可以實現(xiàn)頁面組件的緩存，需要將KeepAlive組件加載在app.vue文件中，此時KeepAlive的作用是緩存所有的頁面組件，此時任何應(yīng)用頁面的小時，對應(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ì)就是其中一個子組件將數(shù)據(jù)傳遞給父組件，由父組件再傳給另一個子組件，本質(zhì)上還是子傳父（復(fù)習(xí)筆記六十一有詳細(xì)介紹）

3.2 組件樹傳值

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

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

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

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

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

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

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

（1）在集成終端輸入： npm i --save pubsub-js來安裝pubsub-js包，這是一個專門用來完成發(fā)布訂閱操作的包，這個包是通用的，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ā)布的值