詳解Vue3.x中組件間參數傳遞的示例代碼
1. 父子組件間參數傳遞
Props 傳遞數據
父組件向子組件傳遞數據通常使用 props。
步驟 1: 定義子組件
假設有一個子組件 ChildComponent.vue，希望從父組件接收一個 message 參數。
// ChildComponent.vue
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
<template>
<div>來自父組件的消息：{{ message }}</div>
</template>
這里，我們使用了 Vue3.x 的 Composition API 中的 defineProps 函數來定義接收的 props。
步驟 2: 父組件傳遞數據
在父組件中，通過 ChildComponent 的標簽屬性來傳遞數據。
// ParentComponent.vue <template> <ChildComponent message="Hello, Vue3!"></ChildComponent> </template> <script setup> import ChildComponent from './ChildComponent.vue'; </script>
$emit 傳遞事件
子組件向父組件傳遞數據，通常是通過事件觸發(fā)的方式，使用 $emit。
子組件定義
在子組件中定義一個按鈕，點擊時觸發(fā)一個自定義事件 update，并傳遞數據給父組件。
// ChildComponent.vue
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['update']);
const updateMessage = () => {
emit('update', '來自子組件的新消息');
};
</script>
<template>
<button @click="updateMessage">更新消息</button>
</template>
父組件接收
在父組件中，監(jiān)聽這個 update 事件，并處理數據。
// ParentComponent.vue
<template>
<ChildComponent @update="handleUpdate"></ChildComponent>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const message = ref('');
const handleUpdate = (newMessage) => {
message.value = newMessage;
};
</script>
2. 兄弟組件間參數傳遞
兄弟組件之間的參數傳遞稍微復雜一些，因為它們沒有直接的父子關系。常見的解決方案是通過共享的全局狀態(tài)管理（如 Vuex）或者通過父組件作為橋梁。
使用父組件作為橋梁
假設有兩個兄弟組件 BrotherComponent1 和 BrotherComponent2，它們通過父組件 ParentComponent 傳遞數據。
步驟 1: 兄弟組件定義
兄弟組件1定義一個方法，通過 $emit 向父組件發(fā)送數據。
// BrotherComponent1.vue
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['send']);
const sendMessage = () => {
emit('send', '來自兄弟1的消息');
};
</script>
<template>
<button @click="sendMessage">發(fā)送消息給兄弟2</button>
</template>
兄弟組件2通過 props 接收數據。
// BrotherComponent2.vue
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
<template>
<div>{{ message }}</div>
</template>
步驟 2: 父組件作為中介
父組件監(jiān)聽 BrotherComponent1 的事件，并將數據通過 props 傳遞給 BrotherComponent2。
// ParentComponent.vue
<template>
<BrotherComponent1 @send="handleSend"></BrotherComponent1>
<BrotherComponent2 :message="message"></BrotherComponent2>
</template>
<script setup>
import { ref } from 'vue';
import BrotherComponent1 from './BrotherComponent1.vue';
import BrotherComponent2 from './BrotherComponent2.vue';
const message = ref('');
const handleSend = (msg) => {
message.value = msg;
};
</script>
對于兄弟組件間的數據傳遞，除了通過父組件作為中介之外，使用 Vuex 進行全局狀態(tài)管理是另一種常見且強大的方法。下面介紹如何使用 Vuex 在 Vue3.x 中實現兄弟組件間的參數傳遞。
使用 Vuex 實現兄弟組件間的參數傳遞
Vuex 是 Vue 的官方狀態(tài)管理庫，它提供了一個集中存儲所有組件的狀態(tài)的機制，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。這使得在不直接關聯的組件之間共享狀態(tài)變得非常方便。
步驟 1: 安裝并配置 Vuex
首先，需要在 Vue3.x 項目中安裝 Vuex。
npm install vuex@next --save
接下來，在項目中創(chuàng)建一個 Vuex store。假設項目結構中有一個 store 目錄，在這個目錄下創(chuàng)建 index.js：
// store/index.js
import { createStore } from 'vuex';
export default createStore({
state() {
return {
message: ''
};
},
mutations: {
updateMessage(state, newMessage) {
state.message = newMessage;
}
}
});
在這個 Vuex store 中定義了一個簡單的狀態(tài) message 和一個用于更新這個狀態(tài)的 mutation updateMessage。
步驟 2: 在 Vue 應用中使用 Vuex store
在 Vue 應用中引入并使用這個 Vuex store。通常在 main.js 中完成這個步驟：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');
步驟 3: 在組件中使用 Vuex 狀態(tài)
至此，任何組件都可以通過 useStore hook 來訪問和修改 Vuex store 中的狀態(tài)。
兄弟組件1 - 發(fā)送消息
// BrotherComponent1.vue
<script setup>
import { useStore } from 'vuex';
const store = useStore();
const sendMessage = () => {
store.commit('updateMessage', '來自兄弟1的消息');
};
</script>
<template>
<button @click="sendMessage">發(fā)送消息給兄弟2</button>
</template>
兄弟組件2 - 接收消息
// BrotherComponent2.vue
<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const message = computed(() => store.state.message);
</script>
<template>
<div>消息：{{ message }}</div>
</template>
在這個示例中，BrotherComponent1 通過調用 Vuex 的 commit 方法來更新狀態(tài)，而 BrotherComponent2 通過 computed 屬性來響應狀態(tài)的變化，并顯示更新后的消息。
3. 組件間的參數透傳
參數透傳是指在組件嵌套場景中，將外層組件接收到的 props 直接傳遞給內層組件，而不需要在每一層組件中顯式聲明所有的 props。這種技術在處理高階組件或封裝庫組件時特別有用，可以大幅度減少代碼的重復性和復雜性。
使用 v-bind="$attrs" 實現參數透傳
在 Vue3.x 中，可以通過 $attrs 屬性結合 v-bind 指令來實現參數透傳。$attrs 包含了父組件傳遞給子組件的 props（未被子組件聲明為 props 的屬性）和監(jiān)聽器（v-on 事件監(jiān)聽器），這使得我們可以輕松地將所有外部屬性傳遞給內層組件。
示例：封裝一個透傳參數的按鈕組件
假設我們有一個 BaseButton.vue 組件，這個組件需要接收多種外部 props 用于控制按鈕的樣式和行為，但我們不希望在這個組件內部聲明所有可能的 props。
步驟 1: 定義 BaseButton.vue
// BaseButton.vue
<script setup>
// 注意，這里我們不聲明具體的 props
</script>
<template>
<button v-bind="$attrs">{{ $attrs.label }}</button>
</template>
在 BaseButton 組件中，我們使用了 v-bind="$attrs" 來綁定所有父組件傳遞的屬性。這樣，任何在父組件中設置的屬性都會自動應用到 button 元素上，包括事件監(jiān)聽器。
步驟 2: 在父組件中使用 BaseButton
// App.vue
<template>
<BaseButton
label="點擊我"
class="btn-primary"
@click="handleClick"
></BaseButton>
</template>
<script setup>
const handleClick = () => {
console.log('按鈕被點擊了！');
};
</script>
在父組件 App.vue 中，我們向 BaseButton 組件傳遞了一個 label 屬性、一個 class，以及一個點擊事件的監(jiān)聽器。所有這些屬性和監(jiān)聽器都將通過 $attrs 透傳給內部的 button 元素。
通過使用 $attrs 和 v-bind，Vue3.x 允許開發(fā)者在組件間高效地透傳參數，極大地提高了組件封裝的靈活性和可重用性。這種方法尤其適合開發(fā)那些需要接收大量外部 props 的基礎組件或庫組件，可以避免在組件內部手動聲明和傳遞大量的 props，從而簡化代碼并減少出錯的可能。
總結
下表總結了 Vue3.x 中組件間參數傳遞的方法和步驟：
| 類型 | 方法 | 步驟 | 代碼示例 |
|---|---|---|---|
| 父子組件間傳遞 | Props 傳遞數據 | 1. 子組件使用 defineProps 定義接收的 props。2. 父組件通過子組件標簽屬性傳遞數據。 | 子組件：const props = defineProps({ message: String });父組件：<ChildComponent message="Hello, Vue3!" /> |
| $emit 傳遞事件 | 1. 子組件使用 defineEmits 定義事件。2. 子組件通過事件發(fā)送數據。 3. 父組件監(jiān)聽并處理事件。 | 子組件：const emit = defineEmits(['update']);父組件：<ChildComponent @update="handleUpdate" /> | |
| 兄弟組件間傳遞 | 使用父組件作為橋梁 | 1. 兄弟組件之一通過 $emit 向父組件發(fā)送數據。2. 父組件通過 props 將數據傳遞給另一個兄弟組件。 | 父組件：<BrotherComponent1 @send="handleSend" /><BrotherComponent2 :message="message" /> |
| 使用 Vuex | 1. 配置 Vuex store 并定義全局狀態(tài)。 2. 一個兄弟組件通過 Vuex 修改狀態(tài)。 3. 另一個兄弟組件通過 Vuex 獲取狀態(tài)。 | Vuex：store.commit('updateMessage', '來自兄弟1的消息');const message = computed(() => store.state.message); | |
| 參數透傳 | 使用 $attrs | 1. 外層組件接收到的 props 直接通過 $attrs 和 v-bind 透傳給內層組件。2. 內層組件自動繼承所有外部屬性和事件監(jiān)聽器，無需顯式聲明。 | <button v-bind="$attrs">{{ $attrs.label }}</button> |
結語
在 Vue3.x 中，組件間的參數傳遞是維持數據流動和組件通信的重要機制。利用 props 和 $emit 可以方便地在父子組件間進行數據交互，而通過父組件作為橋梁或使用全局狀態(tài)管理則可以實現兄弟組件或更復雜關系組件間的數據傳遞。掌握這些技巧將有助于構建更加高效和可維護的 Vue 應用。
以上就是詳解Vue3.x中組件間參數傳遞的示例代碼的詳細內容，更多關于Vue3.x組件間參數傳遞的資料請關注腳本之家其它相關文章！
相關文章
Vue過濾器filters用于一些常見的文本格式化,通過過濾器可以進行處理成自己想要展示出來的格式,由“管道”符號指示,本文給大家介紹Vue過濾器filters使用方式,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue如何解決循環(huán)引用組件報錯的問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了Vue 換膚的示例實踐，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue實現裁切圖片同時實現放大、縮小、旋轉功能，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue中el-date-picker限制選擇7天內&禁止內框選擇
項目中需要選擇時間范圍,并且只能選擇當前日期之后的七天,本文就來介紹了vue中el-date-picker限制選擇7天內&禁止內框選擇,具有一定的參考價值,感興趣的可以了解一下2023-12-12
vue項目npm?run?build打包dist文件及打包后空白解決辦法
npm run build 這個命令會執(zhí)行Vue CLI中預定義的打包配置,并將打包后的文件存放在"dist"文件夾中,這篇文章主要給大家介紹了關于vue項目npm?run?build打包dist文件及打包后空白的解決辦法,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了vue3中使用keep?alive實現前進更新后退銷毀示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
想象一下淘寶客服的聊天窗口：你發(fā)消息,客服立刻就能看到并回復,這種即時通訊效果是如何實現的呢？本文我們使用 Vue3 作為前端框架,Node.js 作為后端,通過 WebSocket+ Socket.IO 協議實現實時通信,需要的朋友可以參考下2025-05-05
今天小編就為大家分享一篇vue 中滾動條始終定位在底部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細介紹了vue3的ref,computed,reactive和toRefs，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03