vue3 常用的幾種元件通訊方式

一只两支三指發表於2024-08-28
Vue元件

vue3 常用的幾種元件通訊方式，大致如下

  • Props/Emit
  • Pinia
  • 事件匯流排（mitt）
  • Provide/Inject
  • 瀏覽器本地儲存

1. Props / Emit

註釋：prop屬性名稱 / 方法名稱的格式，採用 camelCase 與 kebab-case。

1.1 props

（1）上游元件設定 prop 值（透過 v-bind 或 冒號）

或者

（2）下游元件接收 prop 值 （透過 defineProps 方法）

import { defineProps } from 'vue'

更多詳見：https://cn.vuejs.org/guide/components/props.html

1.2 Emit

（1）上游元件：接收來自下游元件的方法觸發

（2）下游元件：主動觸發上游元件的方法

或者

import { defineEmits } from 'vue'

2. Pinia

　　詳見 vue3的 store (Pinia)

3. 事件匯流排（第三方庫mitt）

　　第一步：安裝 mitt　　　　npm install mitt -save

　　第二步：初始化 mitt，即 新建一個 mitt.js 檔案，然後寫入如下內容

　　　　import mitt from 'mitt'

　　　　const emitter = new mitt()

　　　　export default emitter


　　第三步：觸發 mitt

import emitter from '@/utils/mitt'

function handleClick() {

　　emitter.emit('on-button-click', true);
}


　　第四步：接收 mitt
　　　　import { onMounted, onUnmounted } from 'vue';
　　　　import emitter from '@/utils/mitt'

　　　　function onFoo(e) { console.log(' 觸發了！'); }

　　　　// 監聽
　　　　onMounted(() => {
　　　　　　emitter.on('on-button-click', onFoo);
　　　　});

　　　　// 移除
　　　　onUnmounted(() => {
　　　　　　emitter.off('on-button-click', onFoo);
　　　　});

4. Provide/Inject

　　跨元件通訊的情況中，有時不需要臨近元件的資料，而是想要直接獲取更遠的祖級或孫級元件的資料。

　　採用 props 的逐級資料傳遞顯然比較麻煩，還需要注意中間元件的傳遞問題，如下圖：

　　provide-inject 的依賴注入方式，（就是在希望儘量避免 props逐級傳遞 可能出現問題的情況下而產生的），它無論層級有多深，都可以注入由祖元件提供給整條鏈路的依賴。

　　 以下是 provide-inject 的使用方式：

　　（1）提供資料 provide()

　　　　註釋：一個元件可以多次呼叫 provide()， provide() 函式接收兩個引數。

      • 第一個引數是注入名，可以是一個字串或是一個 Symbol
      • 第二個引數是提供的值，值可以是任意型別，包括響應式的狀態

　　　　 特殊情況下，還可以在整個應用層面提供依賴，如下

　　（2）注入資料 inject()

　　　　註釋：inject() 函式有三個引數

      • 第一個引數是注入的 key，與provide()函式的第一個引數對應
      • 第二個引數是可選的預設值，即在沒有匹配到 key 時使用的預設值
      • 第三個引數是可選的 boolean 值，表示第二個引數是否被當作一個工廠函式，如果是，則第二個引數必須是工廠函式

5. 瀏覽器本地儲存

採用 localstorage/sessionstorage 等儲存在瀏覽器本地，然後透過 pinia 或 偵聽器 來進一步處理，實現實時更新

相關文章