Vue3組件傳參的多種方式小結(jié)
一、Vue3 組件傳參概述
在 Vue 3 的應(yīng)用開發(fā)旅程中，組件間的高效通信是構(gòu)建復(fù)雜交互式應(yīng)用的關(guān)鍵基石。無論是小型項目中簡單的父子組件協(xié)作，還是大型應(yīng)用里多層嵌套組件、兄弟組件之間的默契配合，精準且流暢的參數(shù)傳遞都起著決定性作用。它確保了數(shù)據(jù)能在各個組件 “崗位” 按需流動，使得整個應(yīng)用如同精密運轉(zhuǎn)的機器，為用戶帶來流暢且一致的體驗。接下來，就讓我們深入探究 Vue 3 組件傳參的奧秘世界。
二、父子組件傳參
（一）父組件向子組件傳參
父組件作為數(shù)據(jù)的源頭，常常需要將某些信息精準地傳遞給子組件，以便子組件基于這些數(shù)據(jù)進行個性化展示或執(zhí)行特定邏輯。在 Vue 3 中，這一過程通過屬性綁定優(yōu)雅實現(xiàn)。例如，父組件擁有一個關(guān)鍵數(shù)據(jù)parentMessage，在使用子組件標簽時，像這樣綁定數(shù)據(jù)：
<template> <ChildComponent :message="parentMessage" /> </template> <script setup> import ChildComponent from './ChildComponent.vue'; const parentMessage = '這是來自父組件的消息'; </script>
而子組件則利用defineProps來接收這份來自父方的 “饋贈”：
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
如此一來，子組件就能順利獲取父組件傳遞的message數(shù)據(jù)，并在模板中靈活運用。
（二）子組件向父組件傳參
有時，子組件內(nèi)部發(fā)生的某些變化或產(chǎn)生的數(shù)據(jù)，需要及時反饋給父組件知曉。這時，子組件就會扮演信息傳遞者的角色，通過defineEmits觸發(fā)自定義事件來達成這一目的。假設(shè)子組件中有個按鈕，點擊后要向父組件傳遞一段文本數(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>
父組件則在使用子組件標簽時，敏銳地監(jiān)聽這個自定義事件：
<template>
<ChildComponent @send-data="handleChildData" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const handleChildData = (data) => {
console.log('收到子組件數(shù)據(jù)：', data);
};
</script>
這般雙向的信息互通，讓父子組件間的協(xié)作親密無間。
（三）案例實操：計數(shù)器組件
為了更直觀地感受父子組件傳參的魅力，我們構(gòu)建一個簡易計數(shù)器案例。父組件負責(zé)展示計數(shù)器的當(dāng)前數(shù)值，并提供操作按鈕，子組件則承載計數(shù)器的增減邏輯。
父組件：
<template>
<div>
當(dāng)前計數(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)點擊子組件中的增減按鈕，子組件通過事件將新的計數(shù)數(shù)值傳遞給父組件，父組件更新自身狀態(tài)，實現(xiàn)了計數(shù)器功能的流暢運作。
三、跨層級組件傳參
（一）Provide/Inject 機制
在多層嵌套的組件架構(gòu)中，若按照常規(guī)的父子組件傳參方式一級級傳遞數(shù)據(jù)，會使代碼變得繁瑣不堪，猶如一條冗長且錯綜復(fù)雜的信息傳遞鏈。此時，Vue 3 提供的 Provide/Inject 機制就如同一條 “捷徑”，讓祖先組件能夠直接為后代組件 “空投” 所需數(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>
中間組件（僅作為層級過渡，不做數(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輕松獲取，大大簡化了跨層級數(shù)據(jù)傳遞的復(fù)雜度。
（二）Pinia 狀態(tài)管理
Pinia 作為 Vue 3 生態(tài)中備受矚目的狀態(tài)管理庫，為跨層級組件數(shù)據(jù)共享提供了一套強大且優(yōu)雅的解決方案。相較于傳統(tǒng)的 Vuex，它具有更簡潔的 API 和更直觀的使用方式。
首先，創(chuàng)建一個 Pinia store 實例：
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
在組件中使用時，無論是哪個層級的組件，只要引入并調(diào)用相應(yīng)方法，就能實現(xiàn)數(shù)據(jù)的共享與操作：
父組件：
<template>
<div>
當(dāng)前計數(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，組件們仿佛連接到了一個共享的數(shù)據(jù)中樞，輕松實現(xiàn)跨層級的無縫協(xié)作。
四、兄弟組件傳參
（一）通過父組件中轉(zhuǎn)
當(dāng)兄弟組件需要交流信息時，由于它們在層級上平起平坐，無法直接傳遞數(shù)據(jù)，這時父組件就可以充當(dāng)一個可靠的 “中間人”。例如，有兩個兄弟組件，一個是輸入框組件用于輸入文本，另一個是顯示組件用于展示輸入框中的內(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)傳遞給顯示組件，實現(xiàn)了兄弟組件間的間接通信。
（二）使用 mitt 庫直接傳參
除了借助父組件中轉(zhuǎn)，還可以利用 mitt 庫實現(xiàn)兄弟組件間更為直接的參數(shù)傳遞。mitt 庫提供了一個輕量級的事件總線功能。
首先安裝并引入 mitt 庫：
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 庫創(chuàng)建的事件總線，兄弟組件可以跳過父組件，直接建立高效的數(shù)據(jù)傳輸通道。
五、組件傳參的注意事項
（一）單向數(shù)據(jù)流原則
在 Vue 3 組件傳參體系中，單向數(shù)據(jù)流是一條神圣不可侵犯的規(guī)則。父組件傳遞給子組件的數(shù)據(jù)，子組件應(yīng)視作只讀的 “圣經(jīng)”，絕不能隨意篡改。若子組件需要基于父組件數(shù)據(jù)進行變更，務(wù)必通過觸發(fā)事件告知父組件，由父組件來完成數(shù)據(jù)的更新操作。這就如同一個嚴謹?shù)闹笓]鏈條，確保數(shù)據(jù)流向的可預(yù)測性，避免因隨意修改數(shù)據(jù)引發(fā)難以排查的錯誤，讓整個應(yīng)用始終處于穩(wěn)定可控的狀態(tài)。
（二）屬性命名規(guī)則
組件間傳遞參數(shù)時，屬性命名猶如給數(shù)據(jù)貼上的標簽，需格外謹慎。在父組件的組件標簽上綁定屬性時，要遵循合法的 HTML 屬性命名規(guī)范，避免使用特殊字符或保留字。子組件接收屬性時，命名應(yīng)與父組件傳遞時保持嚴格一致，否則就會出現(xiàn)數(shù)據(jù) “迷路” 的情況，導(dǎo)致組件無法正確獲取所需信息，影響應(yīng)用的正常運行。
六、總結(jié)與展望
回顧 Vue 3 組件傳參的多種精妙方式，從父子組件的親密互動，到跨層級組件的高效協(xié)作，再到兄弟組件的靈活通信，每一種方式都針對特定場景發(fā)揮著獨特優(yōu)勢。這些傳參技巧如同搭建 Vue 3 應(yīng)用大廈的堅固榫卯，緊密連接各個組件模塊，讓應(yīng)用得以穩(wěn)固構(gòu)建并流暢運行。
以上就是Vue3組件傳參的多種方式小結(jié)的詳細內(nèi)容，更多關(guān)于Vue3組件傳參的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue 引入AMap高德地圖的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vite+vue3+ts項目中提示無法找到模塊的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
詳解vue2.0的Element UI的表格table列時間戳格式化
本篇文章主要介紹了詳解vue2.0的Element UI的表格table列時間戳格式化，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-06-06
詳解基于webpack和vue.js搭建開發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開發(fā)環(huán)境 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了vue2中seo時使用vue-meta-info,本文通過實例代碼給大家詳細講解，文末給大家補充介紹了vue seo管理 vue-meta-info 動態(tài)設(shè)置meta和title的相關(guān)知識，需要的朋友可以參考下2022-10-10
vue中阻止click事件冒泡,防止觸發(fā)另一個事件的方法
下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue自定義指令三步如何實現(xiàn)數(shù)據(jù)拉取更新,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue3實現(xiàn)canvas畫布組件自定義畫板實例代碼
Vue?Canvas是一個基于Vue.js的輕量級畫板組件,旨在提供一個簡易的畫布功能,用戶可以在網(wǎng)頁上進行自由繪圖,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
vue集成openlayers加載geojson并實現(xiàn)點擊彈窗教程
這篇文章主要為大家詳細介紹了vue集成openlayers加載geojson并實現(xiàn)點擊彈窗教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09