vue3中實現(xiàn)組件通信的方法總結(jié)
更新時間：2023年06月25日 11:39:33 作者：云卷云舒%
在Vue3中，有多種方法可以實現(xiàn)組件之間的通信，本文就通過代碼示例給大家總結(jié)一些vue3實現(xiàn)組件通信的常用方法,需要的朋友可以參考下
在 Vue 3 中，有多種方法可以實現(xiàn)組件之間的通信。以下是一些常見的方法：
1、Props 和 Events：父組件通過 props 向子組件傳遞數(shù)據(jù)，子組件通過觸發(fā)事件向父組件發(fā)送消息。這是 Vue 中最基本的組件通信方式
props接收的數(shù)據(jù)是只讀的
<!-- 父組件 -->
<template>
<ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template>
<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
import {ref} from 'vue'
let parentMessage = ref('Hello from parent'),
const handleChildEvent = (payload) => {
console.log('Received event from child:', payload);
}
</script>
<!-- 子組件 -->
<template>
<div>
<p>{{ props.message }}</p>
<p>{{ message }}</p>
<button @click="emitEvent">Send Event to Parent</button>
</div>
</template>
<script setup lang="ts">
import {defineEmits} from 'vue'
const emit = defineEmits();
// 使用defineProperty來接收數(shù)據(jù)，defineProperty不需引入直接使用即可defineProps({})或defineProps([]),
// props中的是代理對象，在模板中使用可以省略props，在js中不可省略
const props = defineProps({ message: String});
const emitEvent = () =>{
$emit('childEvent', 'Hello from child');
}
</script>2、Provide 和 Inject：這是一種在組件樹中跨級傳遞數(shù)據(jù)的方法。祖先組件通過 provide 選項提供數(shù)據(jù)，后代組件通過 inject 選項接收數(shù)據(jù)。
// 祖先組件
export default {
provide() {
return {
sharedData: 'Shared data from ancestor',
};
},
};
// 后代組件
export default {
inject: ['sharedData'],
};3、Vuex：Vuex 是一個專門為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它可以幫助你管理應(yīng)用程序中的共享狀態(tài)，實現(xiàn)組件之間的通信。
首先，你需要安裝 Vuex 并在你的應(yīng)用程序中配置它：
npm install vuex@next --save
然后，創(chuàng)建一個 Vuex store：
// store.js
import { createStore } from 'vuex';
export default createStore({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
});在你的應(yīng)用程序中使用 store：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');現(xiàn)在，你可以在組件中使用 this.$store 訪問 store，并通過提交 mutation 或 dispatching action 來更新狀態(tài)。
<!-- 組件 -->
<template>
<div>
<p>{{ $store.state.count }}</p>
<button @click="$store.commit('increment')">Increment</button>
</div>
</template>這些方法可以根據(jù)你的需求和應(yīng)用程序的復(fù)雜性來選擇。對于簡單的組件通信，Props 和 Events 通常就足夠了。對于更復(fù)雜的應(yīng)用程序，你可能需要考慮使用 Provide/Inject 或 Vuex。
4、類似vue2中的eventBus插件mitt 實現(xiàn)全局通信
到此這篇關(guān)于vue3中實現(xiàn)組件通信的方法總結(jié)的文章就介紹到這了,更多相關(guān)vue3組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue.js響應(yīng)式原理解析與實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了Vue實現(xiàn)直播功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
解決vue-router 二級導(dǎo)航默認(rèn)選中某一選項的問題
今天小編就為大家分享一篇解決vue-router 二級導(dǎo)航默認(rèn)選中某一選項的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Axios 毋庸多說大家在前端開發(fā)中常用的一個發(fā)送 HTTP 請求的庫，用過的都知道,篇文章主要給大家介紹了關(guān)于vue中如何簡單封裝axios的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容
這篇文章主要介紹了vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue?Element?UI擴(kuò)展內(nèi)容過長使用tooltip顯示
這篇文章主要為大家介紹了vue?Element?UI擴(kuò)展內(nèi)容過長使用tooltip展示鼠標(biāo)hover時的提示信息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
今天小編就為大家分享一篇vue中的 $slot 獲取插槽的節(jié)點實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中動態(tài)修改animation效果無效問題詳情
這篇文章主要介紹了vue中動態(tài)修改animation效果無效問題詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05