Vue3組件傳參的多種方式小結(jié)
一、Vue3 組件傳參概述
在 Vue 3 的應(yīng)用開發(fā)旅程中，組件間的高效通信是構(gòu)建復(fù)雜交互式應(yīng)用的關(guān)鍵基石。無論是小型項(xiàng)目中簡(jiǎn)單的父子組件協(xié)作，還是大型應(yīng)用里多層嵌套組件、兄弟組件之間的默契配合，精準(zhǔn)且流暢的參數(shù)傳遞都起著決定性作用。它確保了數(shù)據(jù)能在各個(gè)組件 “崗位” 按需流動(dòng)，使得整個(gè)應(yīng)用如同精密運(yùn)轉(zhuǎn)的機(jī)器，為用戶帶來流暢且一致的體驗(yàn)。接下來，就讓我們深入探究 Vue 3 組件傳參的奧秘世界。
二、父子組件傳參
（一）父組件向子組件傳參
父組件作為數(shù)據(jù)的源頭，常常需要將某些信息精準(zhǔn)地傳遞給子組件，以便子組件基于這些數(shù)據(jù)進(jìn)行個(gè)性化展示或執(zhí)行特定邏輯。在 Vue 3 中，這一過程通過屬性綁定優(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 = '這是來自父組件的消息'; </script>
而子組件則利用defineProps來接收這份來自父方的 “饋贈(zèng)”：
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
如此一來，子組件就能順利獲取父組件傳遞的message數(shù)據(jù)，并在模板中靈活運(yùn)用。
（二）子組件向父組件傳參
有時(shí)，子組件內(nèi)部發(fā)生的某些變化或產(chǎn)生的數(shù)據(jù)，需要及時(shí)反饋給父組件知曉。這時(shí)，子組件就會(huì)扮演信息傳遞者的角色，通過defineEmits觸發(fā)自定義事件來達(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)聽這個(gè)自定義事件：
<template>
<ChildComponent @send-data="handleChildData" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const handleChildData = (data) => {
console.log('收到子組件數(shù)據(jù)：', data);
};
</script>
這般雙向的信息互通，讓父子組件間的協(xié)作親密無間。
（三）案例實(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)擊子組件中的增減按鈕，子組件通過事件將新的計(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í)過渡，不做數(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>
通過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í)，無論是哪個(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>
通過 Pinia，組件們仿佛連接到了一個(gè)共享的數(shù)據(jù)中樞，輕松實(shí)現(xiàn)跨層級(jí)的無縫協(xié)作。
四、兄弟組件傳參
（一）通過父組件中轉(zhuǎn)
當(dāng)兄弟組件需要交流信息時(shí)，由于它們?cè)趯蛹?jí)上平起平坐，無法直接傳遞數(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>
輸入框組件將輸入的文本通過父組件中轉(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)建的事件總線，兄弟組件可以跳過父組件，直接建立高效的數(shù)據(jù)傳輸通道。
五、組件傳參的注意事項(xiàng)
（一）單向數(shù)據(jù)流原則
在 Vue 3 組件傳參體系中，單向數(shù)據(jù)流是一條神圣不可侵犯的規(guī)則。父組件傳遞給子組件的數(shù)據(jù)，子組件應(yīng)視作只讀的 “圣經(jīng)”，絕不能隨意篡改。若子組件需要基于父組件數(shù)據(jù)進(jìn)行變更，務(wù)必通過觸發(fā)事件告知父組件，由父組件來完成數(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)致組件無法正確獲取所需信息，影響應(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)文章！
相關(guān)文章
在實(shí)際開發(fā)項(xiàng)目過程中有時(shí)候需要上傳比較大的文件，然后呢，上傳的時(shí)候相對(duì)來說就會(huì)慢一些，so，后臺(tái)可能會(huì)要求前端進(jìn)行文件切片上傳。本文介紹了Vue實(shí)現(xiàn)文件切片上傳的示例代碼，需要的可以參考一下2022-10-10
vue實(shí)現(xiàn)頁(yè)面div盒子拖拽排序功能
本文主要介紹了vue實(shí)現(xiàn)頁(yè)面div盒子拖拽排序功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了vue-cli的eslint相關(guān)用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章，我們通過實(shí)現(xiàn)一個(gè)簡(jiǎn)單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對(duì)Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問題
這篇文章主要介紹了ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解vue后臺(tái)系統(tǒng)登錄態(tài)管理
這篇文章主要介紹了vue后臺(tái)系統(tǒng)登錄管理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了深度解析?Vue3?的響應(yīng)式機(jī)制，今天就帶大家深入了解一下 Vue 3 的響應(yīng)式機(jī)制，相信學(xué)完今天的內(nèi)容，會(huì)對(duì)響應(yīng)式機(jī)制有更深地體會(huì)；文章會(huì)結(jié)合代碼示例，幫大家掌握響應(yīng)式機(jī)制的進(jìn)階用法，讓我們正式開始學(xué)習(xí)吧2022-09-09
elementUI Tree 樹形控件單選實(shí)現(xiàn)示例
在ElementUI中樹形控件本身不支持單選功能,本文就來介紹一下如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
分頁(yè)組件在web項(xiàng)目中是十分常見的組件，讓我們使用Vue構(gòu)建可重用的分頁(yè)組件，關(guān)于基本結(jié)構(gòu)和相關(guān)事件監(jiān)聽大家參考下本文2018-03-03