前言、理解Vue 3的數(shù)據(jù)流

Vue 3 提供了多種數(shù)據(jù)傳遞的方式，讓我們的組件之間可以盡情地交流。接下來(lái)，我們就直接一個(gè)個(gè)來(lái)看，這些方式都是怎么工作的。

一、Props：從父到子的經(jīng)典路徑

在 Vue 中，子組件可以通過(guò) props 接收父組件傳遞過(guò)來(lái)的數(shù)據(jù)，這可是從父組件到子組件傳遞數(shù)據(jù)的老傳統(tǒng)了。這就像家長(zhǎng)給孩子零花錢一樣，孩子只能使用家長(zhǎng)給的，不能自己去拿家里的錢。

// 父組件
<template>
  <ChildComponent :message="greeting" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const greeting = 'Hello!';
</script>

// 子組件
<script setup>
const props = defineProps({
  message: String,
});
console.log(message); // "Hello!"
</script>

<script setup> 使用了 Composition API，它簡(jiǎn)化了 prop 的訪問(wèn)方式。所以我們不需要通過(guò) props 對(duì)象來(lái)訪問(wèn) prop 的值，可以直接將 prop 聲明為一個(gè)變量，并在模板或邏輯中使用它。

二、Emits：子組件的呼喚

如果子組件需要某些數(shù)據(jù)時(shí)呢，總不能坐等著父組件傳遞吧。所以接著是Emits，它讓子組件能夠向上發(fā)射信號(hào)。通過(guò)defineEmits和$emit，子組件可以告訴父組件：“我有事情要通知！”

// 父組件
<template>
  <ChildComponent @updateMessage="newGreeting = $event" />
  <p>{{ newGreeting }}</p>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
let newGreeting = '';
</script>

// 子組件
<script setup>
const emit = defineEmits(['updateMessage']);
const updateParent = () => {
  emit('updateMessage', 'Updated from child!');
};
</script>

父組件包含一個(gè)子組件實(shí)例，并監(jiān)聽子組件發(fā)出的 updateMessage 事件。當(dāng)這個(gè)事件被觸發(fā)時(shí)，父組件會(huì)更新其內(nèi)部的 newGreeting 數(shù)據(jù)屬性。

子組件中定義了一個(gè)方法 updateParent，當(dāng)調(diào)用這個(gè)方法時(shí)，它會(huì)觸發(fā) updateMessage 事件，并傳遞一個(gè)字符串作為參數(shù)給父組件。

每當(dāng)觸發(fā) updateMessage 事件，父組件會(huì)接收到這個(gè)事件并更新 newGreeting 的值，從而在頁(yè)面上顯示更新后的消息。

這里，$event 只是一個(gè)約定俗成的變量名，用于在事件處理器中捕獲事件對(duì)象或者事件傳遞的數(shù)據(jù)。通常為了使代碼更易于閱讀和理解，我們會(huì)根據(jù)事件數(shù)據(jù)的實(shí)際內(nèi)容來(lái)選擇合適的變量名。

三、provide / inject：上下文中的通信

有時(shí)候組件會(huì)嵌套的比較深，如父組件中有子組件，子組件中有孫組件……當(dāng)組件層級(jí)很深，或者需要跨多個(gè)組件共享數(shù)據(jù)時(shí)，provide 和 inject 就派上用場(chǎng)了。它們能讓我們?cè)诮M件樹中自由傳遞數(shù)據(jù)，而不必層層傳遞props。這在處理深層次嵌套的組件時(shí)非常有用。

// 父組件
<script setup>
import { provide } from 'vue';
provide('theme', 'dark');
</script>

// 子孫組件
<script setup>
import { inject } from 'vue';
const theme = inject('theme');
console.log(theme); // "dark"
</script>

在父組件中，我們使用 provide 函數(shù)來(lái)提供一個(gè)名為 'theme' 的鍵以及對(duì)應(yīng)的值 'dark'。這使得 'theme' 可以被其所有子組件及其子代組件訪問(wèn)。

在子孫組件中，你使用 inject 函數(shù)來(lái)獲取 'theme' 鍵的值。inject 函數(shù)會(huì)查找最近的祖先組件中提供的與 'theme' 鍵相匹配的值。

當(dāng) inject 被調(diào)用時(shí)，Vue 會(huì)沿著組件樹向上查找，直到找到一個(gè)與注入鍵匹配的提供者。如果找不到匹配的提供者，inject 將返回 undefined。為了避免這種情況，可以為 inject 提供一個(gè)默認(rèn)值。

const theme = inject('theme', 'light'); // 如果沒(méi)有找到提供者，則使用 'light' 作為默認(rèn)值

雖然 provide / inject 避免了必須在每一層組件之間傳遞 props 的繁瑣，但過(guò)度使用這種方法可能導(dǎo)致組件之間的耦合度增加，使得代碼難以追蹤和維護(hù)，所以建議適當(dāng)使用。

四、Vuex：全局狀態(tài)管理的專家

既然 provide / inject 不好過(guò)度使用，那么現(xiàn)在就講到 Vuex，它是處理復(fù)雜應(yīng)用中全局狀態(tài)的理想選擇。通過(guò)Vuex，我們可以輕松地管理跨組件的狀態(tài)。

1、安裝 Vuex

如果還沒(méi)有安裝 Vuex，就直接 npm。

npm install vuex

2、創(chuàng)建 Vuex Store

首先，需要?jiǎng)?chuàng)建一個(gè) Vuex store 文件。

import { createStore } from 'vuex';

export default createStore({
  state: {
    theme: 'light',
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme;
    },
  },
  actions: {
    changeTheme({ commit }, theme) {
      commit('setTheme', theme);
    },
  },
  getters: {
    currentTheme(state) {
      return state.theme;
    },
  },
});

• state 是 store 的數(shù)據(jù)容器。

• mutations 是提交到 store 的唯一方式，它們負(fù)責(zé)修改 state。

• actions 是異步操作的處理函數(shù)，可以包含任意的異步操作邏輯。

• getters 是 store 的計(jì)算屬性，用于從 store 中獲取狀態(tài)的派生狀態(tài)。

3、在主應(yīng)用文件中使用 Vuex Store

在我們的主應(yīng)用文件中 main.js 中，引入并使用 Vuex store。

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

4、在組件中使用 Vuex Store

直接使用 store 的屬性和方法。

<template>
  <div :class="theme">
    <!-- 使用 getter -->
    <p>The current theme is {{ currentTheme }}.</p>
    <!-- 使用 action -->
    <button @click="changeTheme('dark')">Switch to dark theme</button>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const theme = computed(() => store.state.theme);
const currentTheme = computed(() => store.getters.currentTheme);

function changeTheme(newTheme) {
  store.dispatch('changeTheme', newTheme);
}

onMounted(() => {
  console.log('Current theme:', store.getters.currentTheme);
});
</script>

• theme 和 currentTheme 是使用 computed 創(chuàng)建的響應(yīng)式引用，分別映射到 store 的狀態(tài)和 getter。

• changeTheme 函數(shù)使用 store.dispatch 來(lái)觸發(fā) changeTheme action，參數(shù)是新的主題值。

• onMounted 鉤子確保在組件掛載后立即執(zhí)行，用于檢查并記錄當(dāng)前的主題。

當(dāng)主題在 Vuex store 中發(fā)生變化時(shí)，由于 theme 和 currentTheme 的響應(yīng)式特性，組件會(huì)自動(dòng)更新 UI 以反映新的主題。changeTheme 函數(shù)提供了切換主題的功能，可以通過(guò)點(diǎn)擊按鈕來(lái)觸發(fā)主題的改變。

除了 vuex ，還有一個(gè) pinia 和它相似，這里就不介紹了。

結(jié)語(yǔ)

到這里，我們一同探索了Vue 3中豐富多彩的數(shù)據(jù)傳遞方式，從基礎(chǔ)的Props和Emits，到進(jìn)階的Provide與Inject，以及全局狀態(tài)管理的Vuex。每種方法都有其獨(dú)特的應(yīng)用場(chǎng)景，就看我們?cè)趺催x擇了。

以上就是Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue3傳遞數(shù)據(jù)方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論