目錄

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) //參數一：消息名,參數二：發布的值