Vue3組件傳參的多種方式小結(jié)
一、Vue3 組件傳參概述
在 Vue 3 的應(yīng)用開(kāi)發(fā)旅程中，組件間的高效通信是構(gòu)建復(fù)雜交互式應(yīng)用的關(guān)鍵基石。無(wú)論是小型項(xiàng)目中簡(jiǎn)單的父子組件協(xié)作，還是大型應(yīng)用里多層嵌套組件、兄弟組件之間的默契配合，精準(zhǔn)且流暢的參數(shù)傳遞都起著決定性作用。它確保了數(shù)據(jù)能在各個(gè)組件 “崗位” 按需流動(dòng)，使得整個(gè)應(yīng)用如同精密運(yùn)轉(zhuǎn)的機(jī)器，為用戶帶來(lái)流暢且一致的體驗(yàn)。接下來(lái)，就讓我們深入探究 Vue 3 組件傳參的奧秘世界。
二、父子組件傳參
（一）父組件向子組件傳參
父組件作為數(shù)據(jù)的源頭，常常需要將某些信息精準(zhǔn)地傳遞給子組件，以便子組件基于這些數(shù)據(jù)進(jìn)行個(gè)性化展示或執(zhí)行特定邏輯。在 Vue 3 中，這一過(guò)程通過(guò)屬性綁定優(yōu)雅實(shí)現(xiàn)。例如，父組件擁有一個(gè)關(guān)鍵數(shù)據(jù)parentMessage，在使用子組件標(biāo)簽時(shí)，像這樣綁定數(shù)據(jù)：
<template> <ChildComponent :message="parentMessage" /> </template> <script setup> import ChildComponent from './ChildComponent.vue'; const parentMessage = '這是來(lái)自父組件的消息'; </script>
而子組件則利用defineProps來(lái)接收這份來(lái)自父方的 “饋贈(zèng)”：
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
如此一來(lái)，子組件就能順利獲取父組件傳遞的message數(shù)據(jù)，并在模板中靈活運(yùn)用。
（二）子組件向父組件傳參
有時(shí)，子組件內(nèi)部發(fā)生的某些變化或產(chǎn)生的數(shù)據(jù)，需要及時(shí)反饋給父組件知曉。這時(shí)，子組件就會(huì)扮演信息傳遞者的角色，通過(guò)defineEmits觸發(fā)自定義事件來(lái)達(dá)成這一目的。假設(shè)子組件中有個(gè)按鈕，點(diǎn)擊后要向父組件傳遞一段文本數(shù)據(jù)，代碼如下：
<template>
<button @click="sendDataToParent">向父組件傳數(shù)據(jù)</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emits = defineEmits(['send-data']);
const sendDataToParent = () => {
const data = '子組件的數(shù)據(jù)';
emits('send-data', data);
};
</script>
父組件則在使用子組件標(biāo)簽時(shí)，敏銳地監(jiān)聽(tīng)這個(gè)自定義事件：
<template>
<ChildComponent @send-data="handleChildData" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const handleChildData = (data) => {
console.log('收到子組件數(shù)據(jù)：', data);
};
</script>
這般雙向的信息互通，讓父子組件間的協(xié)作親密無(wú)間。
（三）案例實(shí)操：計(jì)數(shù)器組件
為了更直觀地感受父子組件傳參的魅力，我們構(gòu)建一個(gè)簡(jiǎn)易計(jì)數(shù)器案例。父組件負(fù)責(zé)展示計(jì)數(shù)器的當(dāng)前數(shù)值，并提供操作按鈕，子組件則承載計(jì)數(shù)器的增減邏輯。
父組件：
<template>
<div>
當(dāng)前計(jì)數(shù): <span>{{ count }}</span>
<ChildComponent :count="count" @update-count="updateCount" />
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
const count = ref(0);
const updateCount = (newCount) => {
count.value = newCount;
};
</script>
<template>
<button @click="increment">增加</button>
<button @click="decrement">減少</button>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
count: Number
});
const emits = defineEmits(['update:count']);
const increment = () => {
emits('update:count', props.count + 1);
};
const decrement = () => {
emits('update:count', props.count - 1);
};
</script>
當(dāng)點(diǎn)擊子組件中的增減按鈕，子組件通過(guò)事件將新的計(jì)數(shù)數(shù)值傳遞給父組件，父組件更新自身狀態(tài)，實(shí)現(xiàn)了計(jì)數(shù)器功能的流暢運(yùn)作。
三、跨層級(jí)組件傳參
（一）Provide/Inject 機(jī)制
在多層嵌套的組件架構(gòu)中，若按照常規(guī)的父子組件傳參方式一級(jí)級(jí)傳遞數(shù)據(jù)，會(huì)使代碼變得繁瑣不堪，猶如一條冗長(zhǎng)且錯(cuò)綜復(fù)雜的信息傳遞鏈。此時(shí)，Vue 3 提供的 Provide/Inject 機(jī)制就如同一條 “捷徑”，讓祖先組件能夠直接為后代組件 “空投” 所需數(shù)據(jù)。
祖先組件：
<template>
<div>
<MiddleComponent />
</div>
</template>
<script setup>
import { provide } from 'vue';
import MiddleComponent from './MiddleComponent.vue';
const sharedData = '祖先共享的數(shù)據(jù)';
provide('sharedData', sharedData);
</script>
中間組件（僅作為層級(jí)過(guò)渡，不做數(shù)據(jù)處理）：
<template>
<div>
<ChildComponent />
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
后代組件：
<template>
<div>{{ injectedData }}</div>
</template>
<script setup>
import { inject } from 'vue';
const injectedData = inject('sharedData');
</script>
通過(guò)provide在祖先組件聲明共享數(shù)據(jù)，后代組件利用inject輕松獲取，大大簡(jiǎn)化了跨層級(jí)數(shù)據(jù)傳遞的復(fù)雜度。
（二）Pinia 狀態(tài)管理
Pinia 作為 Vue 3 生態(tài)中備受矚目的狀態(tài)管理庫(kù)，為跨層級(jí)組件數(shù)據(jù)共享提供了一套強(qiáng)大且優(yōu)雅的解決方案。相較于傳統(tǒng)的 Vuex，它具有更簡(jiǎn)潔的 API 和更直觀的使用方式。
首先，創(chuàng)建一個(gè) Pinia store 實(shí)例：
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
在組件中使用時(shí)，無(wú)論是哪個(gè)層級(jí)的組件，只要引入并調(diào)用相應(yīng)方法，就能實(shí)現(xiàn)數(shù)據(jù)的共享與操作：
父組件：
<template>
<div>
當(dāng)前計(jì)數(shù): <span>{{ counterStore.count }}</span>
<ChildComponent />
</div>
</template>
<script setup>
import { useCounterStore } from './store';
const counterStore = useCounterStore();
</script>
子組件：
<template>
<button @click="increment">增加</button>
<button @click="decrement">減少</button>
</template>
<script setup>
import { useCounterStore } from './store';
const counterStore = useCounterStore();
const increment = () => {
counterStore.increment();
};
const decrement = () => {
counterStore.decrement();
};
</script>
通過(guò) Pinia，組件們仿佛連接到了一個(gè)共享的數(shù)據(jù)中樞，輕松實(shí)現(xiàn)跨層級(jí)的無(wú)縫協(xié)作。
四、兄弟組件傳參
（一）通過(guò)父組件中轉(zhuǎn)
當(dāng)兄弟組件需要交流信息時(shí)，由于它們?cè)趯蛹?jí)上平起平坐，無(wú)法直接傳遞數(shù)據(jù)，這時(shí)父組件就可以充當(dāng)一個(gè)可靠的 “中間人”。例如，有兩個(gè)兄弟組件，一個(gè)是輸入框組件用于輸入文本，另一個(gè)是顯示組件用于展示輸入框中的內(nèi)容。
父組件：
<template>
<InputComponent @input-text="handleInputText" />
<DisplayComponent :display-text="displayText" />
</template>
<script setup>
import InputComponent from './InputComponent.vue';
import DisplayComponent from './DisplayComponent.vue';
import { ref } from 'vue';
const displayText = ref('');
const handleInputText = (text) => {
displayText.value = text;
};
</script>
輸入框組件：
<template>
<input type="text" @input="sendText" />
</template>
<script setup>
import { defineEmits } from 'vue';
const emits = defineEmits(['input-text']);
const sendText = (e) => {
emits('input-text', e.target.value);
};
</script>
顯示組件：
<template>
<div>{{ displayText }}</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
displayText: String
});
</script>
輸入框組件將輸入的文本通過(guò)父組件中轉(zhuǎn)傳遞給顯示組件，實(shí)現(xiàn)了兄弟組件間的間接通信。
（二）使用 mitt 庫(kù)直接傳參
除了借助父組件中轉(zhuǎn)，還可以利用 mitt 庫(kù)實(shí)現(xiàn)兄弟組件間更為直接的參數(shù)傳遞。mitt 庫(kù)提供了一個(gè)輕量級(jí)的事件總線功能。
首先安裝并引入 mitt 庫(kù)：
npm install mitt
import mitt from 'mitt'; const emitter = mitt();
在發(fā)送數(shù)據(jù)的組件中：
<template>
<button @click="sendData">向兄弟組件傳數(shù)據(jù)</button>
</template>
<script setup>
import { ref } from 'vue';
const data = ref('兄弟組件的數(shù)據(jù)');
const sendData = () => {
emitter.emit('data-transfer', data.value);
};
</script>
在接收數(shù)據(jù)的組件中：
<template>
<div>{{ receivedData }}</div>
</template>
<script setup>
import { onMounted } from 'vue';
import mitt from './mitt';
const receivedData = ref('');
onMounted(() => {
mitt.on('data-transfer', (data) => {
receivedData.value = data;
});
});
</script>
借助 mitt 庫(kù)創(chuàng)建的事件總線，兄弟組件可以跳過(guò)父組件，直接建立高效的數(shù)據(jù)傳輸通道。
五、組件傳參的注意事項(xiàng)
（一）單向數(shù)據(jù)流原則
在 Vue 3 組件傳參體系中，單向數(shù)據(jù)流是一條神圣不可侵犯的規(guī)則。父組件傳遞給子組件的數(shù)據(jù)，子組件應(yīng)視作只讀的 “圣經(jīng)”，絕不能隨意篡改。若子組件需要基于父組件數(shù)據(jù)進(jìn)行變更，務(wù)必通過(guò)觸發(fā)事件告知父組件，由父組件來(lái)完成數(shù)據(jù)的更新操作。這就如同一個(gè)嚴(yán)謹(jǐn)?shù)闹笓]鏈條，確保數(shù)據(jù)流向的可預(yù)測(cè)性，避免因隨意修改數(shù)據(jù)引發(fā)難以排查的錯(cuò)誤，讓整個(gè)應(yīng)用始終處于穩(wěn)定可控的狀態(tài)。
（二）屬性命名規(guī)則
組件間傳遞參數(shù)時(shí)，屬性命名猶如給數(shù)據(jù)貼上的標(biāo)簽，需格外謹(jǐn)慎。在父組件的組件標(biāo)簽上綁定屬性時(shí)，要遵循合法的 HTML 屬性命名規(guī)范，避免使用特殊字符或保留字。子組件接收屬性時(shí)，命名應(yīng)與父組件傳遞時(shí)保持嚴(yán)格一致，否則就會(huì)出現(xiàn)數(shù)據(jù) “迷路” 的情況，導(dǎo)致組件無(wú)法正確獲取所需信息，影響應(yīng)用的正常運(yùn)行。
六、總結(jié)與展望
回顧 Vue 3 組件傳參的多種精妙方式，從父子組件的親密互動(dòng)，到跨層級(jí)組件的高效協(xié)作，再到兄弟組件的靈活通信，每一種方式都針對(duì)特定場(chǎng)景發(fā)揮著獨(dú)特優(yōu)勢(shì)。這些傳參技巧如同搭建 Vue 3 應(yīng)用大廈的堅(jiān)固榫卯，緊密連接各個(gè)組件模塊，讓應(yīng)用得以穩(wěn)固構(gòu)建并流暢運(yùn)行。
以上就是Vue3組件傳參的多種方式小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue3組件傳參的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
vue2之jessibuca視頻插件使用教程詳細(xì)講解
使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法
vue實(shí)現(xiàn)頁(yè)面滾動(dòng)到底部刷新
vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例
使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選功能
Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
vue 基于abstract 路由模式 實(shí)現(xiàn)頁(yè)面內(nèi)嵌的示例代碼
vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問(wèn)題