詳解Vue3.x中組件間參數(shù)傳遞的示例代碼
1. 父子組件間參數(shù)傳遞
Props 傳遞數(shù)據(jù)
父組件向子組件傳遞數(shù)據(jù)通常使用 props。
步驟 1: 定義子組件
假設有一個子組件 ChildComponent.vue，希望從父組件接收一個 message 參數(shù)。
// ChildComponent.vue
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
<template>
<div>來自父組件的消息：{{ message }}</div>
</template>
這里，我們使用了 Vue3.x 的 Composition API 中的 defineProps 函數(shù)來定義接收的 props。
步驟 2: 父組件傳遞數(shù)據(jù)
在父組件中，通過 ChildComponent 的標簽屬性來傳遞數(shù)據(jù)。
// ParentComponent.vue <template> <ChildComponent message="Hello, Vue3!"></ChildComponent> </template> <script setup> import ChildComponent from './ChildComponent.vue'; </script>
$emit 傳遞事件
子組件向父組件傳遞數(shù)據(jù)，通常是通過事件觸發(fā)的方式，使用 $emit。
子組件定義
在子組件中定義一個按鈕，點擊時觸發(fā)一個自定義事件 update，并傳遞數(shù)據(jù)給父組件。
// 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 事件，并處理數(shù)據(jù)。
// 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. 兄弟組件間參數(shù)傳遞
兄弟組件之間的參數(shù)傳遞稍微復雜一些，因為它們沒有直接的父子關系。常見的解決方案是通過共享的全局狀態(tài)管理（如 Vuex）或者通過父組件作為橋梁。
使用父組件作為橋梁
假設有兩個兄弟組件 BrotherComponent1 和 BrotherComponent2，它們通過父組件 ParentComponent 傳遞數(shù)據(jù)。
步驟 1: 兄弟組件定義
兄弟組件1定義一個方法，通過 $emit 向父組件發(fā)送數(shù)據(jù)。
// 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 接收數(shù)據(jù)。
// BrotherComponent2.vue
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
<template>
<div>{{ message }}</div>
</template>
步驟 2: 父組件作為中介
父組件監(jiān)聽 BrotherComponent1 的事件，并將數(shù)據(jù)通過 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>
對于兄弟組件間的數(shù)據(jù)傳遞，除了通過父組件作為中介之外，使用 Vuex 進行全局狀態(tài)管理是另一種常見且強大的方法。下面介紹如何使用 Vuex 在 Vue3.x 中實現(xiàn)兄弟組件間的參數(shù)傳遞。
使用 Vuex 實現(xiàn)兄弟組件間的參數(shù)傳遞
Vuex 是 Vue 的官方狀態(tài)管理庫，它提供了一個集中存儲所有組件的狀態(tài)的機制，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。這使得在不直接關聯(lián)的組件之間共享狀態(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 通過調(diào)用 Vuex 的 commit 方法來更新狀態(tài)，而 BrotherComponent2 通過 computed 屬性來響應狀態(tài)的變化，并顯示更新后的消息。
3. 組件間的參數(shù)透傳
參數(shù)透傳是指在組件嵌套場景中，將外層組件接收到的 props 直接傳遞給內(nèi)層組件，而不需要在每一層組件中顯式聲明所有的 props。這種技術在處理高階組件或封裝庫組件時特別有用，可以大幅度減少代碼的重復性和復雜性。
使用 v-bind="$attrs" 實現(xiàn)參數(shù)透傳
在 Vue3.x 中，可以通過 $attrs 屬性結合 v-bind 指令來實現(xiàn)參數(shù)透傳。$attrs 包含了父組件傳遞給子組件的 props（未被子組件聲明為 props 的屬性）和監(jiān)聽器（v-on 事件監(jiān)聽器），這使得我們可以輕松地將所有外部屬性傳遞給內(nèi)層組件。
示例：封裝一個透傳參數(shù)的按鈕組件
假設我們有一個 BaseButton.vue 組件，這個組件需要接收多種外部 props 用于控制按鈕的樣式和行為，但我們不希望在這個組件內(nèi)部聲明所有可能的 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 透傳給內(nèi)部的 button 元素。
通過使用 $attrs 和 v-bind，Vue3.x 允許開發(fā)者在組件間高效地透傳參數(shù)，極大地提高了組件封裝的靈活性和可重用性。這種方法尤其適合開發(fā)那些需要接收大量外部 props 的基礎組件或庫組件，可以避免在組件內(nèi)部手動聲明和傳遞大量的 props，從而簡化代碼并減少出錯的可能。
總結
下表總結了 Vue3.x 中組件間參數(shù)傳遞的方法和步驟：
| 類型 | 方法 | 步驟 | 代碼示例 |
|---|---|---|---|
| 父子組件間傳遞 | Props 傳遞數(shù)據(jù) | 1. 子組件使用 defineProps 定義接收的 props。2. 父組件通過子組件標簽屬性傳遞數(shù)據(jù)。 | 子組件：const props = defineProps({ message: String });父組件：<ChildComponent message="Hello, Vue3!" /> |
| $emit 傳遞事件 | 1. 子組件使用 defineEmits 定義事件。2. 子組件通過事件發(fā)送數(shù)據(jù)。 3. 父組件監(jiān)聽并處理事件。 | 子組件：const emit = defineEmits(['update']);父組件：<ChildComponent @update="handleUpdate" /> | |
| 兄弟組件間傳遞 | 使用父組件作為橋梁 | 1. 兄弟組件之一通過 $emit 向父組件發(fā)送數(shù)據(jù)。2. 父組件通過 props 將數(shù)據(jù)傳遞給另一個兄弟組件。 | 父組件：<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); | |
| 參數(shù)透傳 | 使用 $attrs | 1. 外層組件接收到的 props 直接通過 $attrs 和 v-bind 透傳給內(nèi)層組件。2. 內(nèi)層組件自動繼承所有外部屬性和事件監(jiān)聽器，無需顯式聲明。 | <button v-bind="$attrs">{{ $attrs.label }}</button> |
結語
在 Vue3.x 中，組件間的參數(shù)傳遞是維持數(shù)據(jù)流動和組件通信的重要機制。利用 props 和 $emit 可以方便地在父子組件間進行數(shù)據(jù)交互，而通過父組件作為橋梁或使用全局狀態(tài)管理則可以實現(xiàn)兄弟組件或更復雜關系組件間的數(shù)據(jù)傳遞。掌握這些技巧將有助于構建更加高效和可維護的 Vue 應用。
以上就是詳解Vue3.x中組件間參數(shù)傳遞的示例代碼的詳細內(nèi)容，更多關于Vue3.x組件間參數(shù)傳遞的資料請關注腳本之家其它相關文章！
相關文章
vue項目中實現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項目中實現(xiàn)el-dialog組件可拖拽效果，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
el-date-picker日期時間選擇器的選擇時間限制到分鐘級別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時間,禁止選擇當前時間的日期及時分,同時允許選擇其他日期的全天時分,通過設置 `pickerOptions` 對象的屬性,可以實現(xiàn)對日期和時間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了詳解vue-cli下ESlint 配置說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了vue中使用axios請求post接口,請求會發(fā)送兩次原因解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
vue通過指令(directives)實現(xiàn)點擊空白處收起下拉框
這篇文章主要介紹了vue通過指令(directives)實現(xiàn)點擊空白處收起下拉框，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue項目如何引入element?ui、iview和echarts
這篇文章主要介紹了vue項目如何引入element?ui、iview和echarts，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在本篇文章里小編給大家整理的是關于vue的keep-alive用法技巧以及實例代碼，需要的朋友們學習下。2019-08-08
uniapp如何打包到H5并成功發(fā)布,以及在打包過程中會遇到的坑如何解決,本文將一一講解,文中通過圖文結合的方式給大家講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-10-10