Vue實(shí)現(xiàn)組件間通信的11種方式
原文合集地址如下，有需要的朋友可以關(guān)注
本文地址
合集地址
組件之間的通信是指不同組件之間在共享數(shù)據(jù)、傳遞消息或觸發(fā)事件等方面進(jìn)行交流和協(xié)作的過程。在應(yīng)用程序中，不同的組件可能需要相互傳遞數(shù)據(jù)、共享狀態(tài)、觸發(fā)動(dòng)作或響應(yīng)事件等，以實(shí)現(xiàn)組件之間的協(xié)調(diào)和交互。
vue組件之間的通信可以有多種形式和方式，常見的包括：
Props / 組件屬性: 通過父組件向子組件傳遞數(shù)據(jù)，將數(shù)據(jù)作為組件的屬性（props）傳遞給子組件。子組件通過接收這些屬性來(lái)訪問和使用父組件傳遞的數(shù)據(jù)。
<!--?父組件?-->
<template>
??<div>
????<child-component?:message="parentMessage"?/>
??</div>
</template>
<script>
import?ChildComponent?from?'./ChildComponent.vue';
export?default?{
??components:?{
????ChildComponent
??},
??data()?{
????return?{
??????parentMessage:?'Hello?from?parent'
????};
??}
}
</script>
<!--?子組件?ChildComponent.vue?-->
<template>
??<div>
????<p>{{?message?}}</p>
??</div>
</template>
<script>
export?default?{
??props:?['message']
}
</script>
Custom Events / 自定義事件: 子組件可以觸發(fā)自定義事件，并通過事件傳遞數(shù)據(jù)給父組件或其他監(jiān)聽該事件的組件。父組件或其他組件通過監(jiān)聽并處理這些自定義事件來(lái)接收傳遞的數(shù)據(jù)。
<!--?父組件?-->
<!--?子組件?ChildComponent.vue?-->
<template>
??<div>
????<button?@click="sendMessage">Send?Message</button>
??</div>
</template>
<script>
export?default?{
??methods:?{
????sendMessage()?{
??????this.$emit('custom-event',?'Hello?from?child');
????}
??}
}
</script>
<!--?父組件?-->
<template>
??<div>
????<child-component?@custom-event="handleEvent"?/>
??</div>
</template>
<script>
import?ChildComponent?from?'./ChildComponent.vue';
export?default?{
??components:?{
????ChildComponent
??},
??methods:?{
????handleEvent(message)?{
??????console.log(message);?//?輸出：Hello?from?child
????}
??}
}
</script>
Event Bus / 事件總線: 使用一個(gè)全局事件總線來(lái)實(shí)現(xiàn)組件之間的通信。不同的組件可以通過事件總線來(lái)訂閱和發(fā)布事件，實(shí)現(xiàn)數(shù)據(jù)的傳遞和通知。需要先下載依賴mtt
npm?install?mitt
//?或者
yarn?add?mitt//?EventBus.js
import?mitt?from?'mitt';
const?bus?=?mitt();
export?default?bus;<!--?組件A?-->
<template>
??<div>
????<button?@click="sendMessage">Send?Message</button>
??</div>
</template>
<script>
import?bus?from?'./EventBus';
export?default?{
??methods:?{
????sendMessage()?{
??????bus.emit('custom-event',?'Hello?from?Component?A');
????}
??}
}
</script>
<!--?組件B?-->
<template>
??<div>
????<p>{{?message?}}</p>
??</div>
</template>
<script>
import?bus?from?'./EventBus';
export?default?{
??data()?{
????return?{
??????message:?''
????};
??},
??mounted()?{
????bus.on('custom-event',?(message)?=>?{
??????this.message?=?message;
????});
??}
}
</script>
Vuex / 狀態(tài)管理: 使用 Vuex 這樣的狀態(tài)管理庫(kù)來(lái)集中管理應(yīng)用程序的狀態(tài)。不同的組件可以通過訪問共享的狀態(tài)來(lái)實(shí)現(xiàn)通信和共享數(shù)據(jù)。
//?創(chuàng)建?Vuex?存儲(chǔ)
import?{?createStore?}?from?'vuex';
const?store?=?createStore({
??state()?{
????return?{
??????message:?'Hello?from?Vuex'
????};
??},
??mutations:?{
????updateMessage(state,?newMessage)?{
??????state.message?=?newMessage;
????}
??}
});
export?default?store;<!--?子組件?ChildComponent.vue?-->
<template>
??<div>
????<p>{{?message?}}</p>
????<button?@click="updateMessage">Update?Message</button>
??</div>
</template>
<script>
import?{?useStore?}?from?'vuex';
export?default?{
??setup()?{
????const?store?=?useStore();
????const?updateMessage?=?()?=>?{
??????store.commit('updateMessage',?'Updated?message?from?child');
????};
????return?{
??????message:?store.state.message,
??????updateMessage
????};
??}
}
</script>
<!--?父組件?-->
<template>
??<div>
????<child-component?/>
??</div>
</template>
<script>
import?ChildComponent?from?'./ChildComponent.vue';
export?default?{
??components:?{
????ChildComponent
??}
}
</script>
Provide / Inject: 使用 provide 和 inject API 來(lái)在組件樹中提供和注入數(shù)據(jù)。父組件通過 provide 提供數(shù)據(jù)，子組件通過 inject 來(lái)注入需要的數(shù)據(jù)。
<!--?祖先組件?-->
<template>
??<div>
????<child-component?/>
??</div>
</template>
<script>
import?{?provide?}?from?'vue';
export?default?{
??setup()?{
????const?message?=?'Hello?from?ancestor';
????provide('message',?message);
??}
}
</script>
<!--?后代組件?-->
<template>
??<div>
????<p>{{?injectedMessage?}}</p>
??</div>
</template>
<script>
import?{?inject?}?from?'vue';
export?default?{
??setup()?{
????const?injectedMessage?=?inject('message');
????return?{
??????injectedMessage
????};
??}
}
</script>
Ref / Reactive: 使用 Vue 3 的 Composition API 中的 ref 和 reactive 來(lái)創(chuàng)建和響應(yīng)式地共享數(shù)據(jù)，以便不同組件可以訪問和修改這些數(shù)據(jù)。
<!--?子組件?-->
<template>
??<div>
????<p>{{?message?}}</p>
??</div>
</template>
<script>
export?default?{
??data()?{
????return?{
??????message:?'Hello?from?child'
????};
??}
}
</script>
<!--?父組件?-->
<template>
??<div>
????<child-component?ref="childRef"?/>
????<button?@click="getChildMessage">Get?Child?Message</button>
??</div>
</template>
<script>
import?{?ref?}?from?'vue';
export?default?{
??components:?{
????ChildComponent
??},
??setup()?{
????const?childRef?=?ref(null);
????const?getChildMessage?=?()?=>?{
??????const?message?=?childRef.value.message;
??????console.log(message);?//?輸出：Hello?from?child
????};
????return?{
??????childRef,
??????getChildMessage
????};
??}
}
</script>
全局事件 / 訂閱發(fā)布模式: 使用全局事件或訂閱發(fā)布模式來(lái)實(shí)現(xiàn)組件之間的通信。不同組件可以訂閱和發(fā)布事件，以實(shí)現(xiàn)數(shù)據(jù)的傳遞和交互。
//?創(chuàng)建一個(gè)事件總線
const?eventBus?=?new?Vue();
//?組件A
const?ComponentA?=?{
??methods:?{
????updateMessage()?{
??????const?newMessage?=?'Updated?message?from?Component?A';
??????eventBus.$emit('messageUpdated',?newMessage);
????}
??},
??//?組件A的其他邏輯
};
//?組件B
const?ComponentB?=?{
??data()?{
????return?{
??????message:?''
????};
??},
??mounted()?{
????eventBus.$on('messageUpdated',?(newMessage)?=>?{
??????this.message?=?newMessage;
????});
??},
??//?組件B的其他邏輯
};
8.useAttrs: useAttrs是 Vue 3 中提供的一個(gè) Composition API，用于獲取組件上未聲明為props的屬性。
<!--?組件?-->
<template>
??<div>
????<p>{{?customAttribute?}}</p>
??</div>
</template>
<script>
import?{?useAttrs?}?from?'vue';
export?default?{
??setup()?{
????const?attrs?=?useAttrs();
????return?{
??????customAttribute:?attrs['custom-attribute']
????};
??}
}
</script>
<!--?使用組件?-->
<template>
??<div>
????<custom-component?custom-attribute="Custom?Attribute?Value"?/>
??</div>
</template>
<script>
import?CustomComponent?from?'./CustomComponent.vue';
export?default?{
??components:?{
????CustomComponent
??}
}
</script>
Pinia: Pinia 是一個(gè)基于 Vue 3 的狀態(tài)管理庫(kù)，提供了一種更簡(jiǎn)潔和類型安全的方式來(lái)管理和共享組件之間的狀態(tài)。需要先下載依賴
npm?install?pinia
//或者
yarn?add?pinia//?創(chuàng)建?Pinia?存儲(chǔ)
import?{?createPinia?}?from?'pinia';
const?pinia?=?createPinia();
export?default?pinia;<!--?組件A?-->
<template>
??<div>
????<button?@click="updateMessage">Update?Message</button>
??</div>
</template>
<script>
import?{?useStore?}?from?'pinia';
export?default?{
??setup()?{
????const?store?=?useStore();
??
????const?updateMessage?=?()?=>?{
??????store.message?=?'Updated?message?from?Component?A';
????};
??
????return?{
??????updateMessage
????};
??}
}
</script>
<!--?組件B?-->
<template>
??<div>
????<p>{{?message?}}</p>
??</div>
</template>
<script>
import?{?useStore?}?from?'pinia';
export?default?{
??setup()?{
????const?store?=?useStore();
??
????return?{
??????message:?store.message
????};
??}
}
</script>
插槽（Slots）: 插槽是一種允許父組件向子組件傳遞內(nèi)容的機(jī)制。父組件可以在子組件中定義插槽，并將內(nèi)容傳遞給插槽，子組件可以根據(jù)需要使用這些內(nèi)容。
<!--?父組件?-->
<template>
??<div>
????<child-component>
??????<!--?插槽內(nèi)容?-->
??????<template?v-slot:content>
????????<p>{{?message?}}</p>
????????<button?@click="updateMessage">Update?Message</button>
??????</template>
????</child-component>
??</div>
</template>
<script>
import?ChildComponent?from?'./ChildComponent.vue';
export?default?{
??components:?{
????ChildComponent
??},
??data()?{
????return?{
??????message:?'Hello?from?parent'
????};
??},
??methods:?{
????updateMessage()?{
??????this.message?=?'Updated?message?from?parent';
????}
??}
}
</script><!--?子組件?-->
<template>
??<div>
????<!--?插槽?-->
????<slot?name="content"></slot>
??</div>
</template>
<script>
export?default?{
??//?子組件邏輯
}
</script>
v-model: v-model 是一種用于在父組件和子組件之間實(shí)現(xiàn)雙向綁定的語(yǔ)法糖。它將value屬性和input事件綁定在一起，使得父組件可以通過v-model來(lái)直接更新子組件的數(shù)據(jù)。
<!--?子組件?-->
<template>
??<div>
????<input?:value="value"?@input="$emit('update:value',?$event.target.value)"?/>
??</div>
</template>
<script>
export?default?{
??props:?['value']
}
</script>
<!--?父組件?-->
<template>
??<div>
????<child-component?v-model="message"?/>
????<p>Message:?{{?message?}}</p>
??</div>
</template>
<script>
import?ChildComponent?from?'./ChildComponent.vue';
export?default?{
??components:?{
????ChildComponent
??},
??data()?{
????return?{
??????message:?''
????};
??}
}
</script>
這些通信方式可以根據(jù)應(yīng)用程序的需求和復(fù)雜性進(jìn)行選擇和組合使用，以實(shí)現(xiàn)組件之間的有效通信和協(xié)作。
