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)文章
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部兩種類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
本文主要主要講述對threejs的一些api進行基本的封裝，在vue3項目中來實現(xiàn)一個可視化的3d項目，包含了一些常用的功能，場景、燈光、攝像機初始化，模型、天空盒的加載，以及鼠標(biāo)點擊和懸浮的事件交互,感興趣的朋友可以參考下2023-06-06
使用VueRouter的addRoutes方法實現(xiàn)動態(tài)添加用戶的權(quán)限路由
這篇文章主要介紹了使用VueRouter的addRoutes方法實現(xiàn)動態(tài)添加用戶的權(quán)限路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
今天小編就為大家分享一篇解決vue的過渡動畫無法正常實現(xiàn)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue+webpack項目基礎(chǔ)配置教程,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue 表單之v-model綁定單選按鈕radio的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
現(xiàn)在vue項目基本上都是使用axios進行請求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法
在父組件 App.vue 中引用子組件 A.vue，把 name 的值傳給 A 組件。這篇文章主要介紹了vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法,需要的朋友可以參考下2018-01-01
關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動態(tài)組件時，會緩存不活動的組件實例，該組件將不會銷毀，這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue項目中如何配置src文件下的@別名問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03