我們使用了 Vuex 來管理全局狀態(tài)。在父組件和子組件中都使用了 mapState 來獲取 message 狀態(tài)，使用 mapMutations 來觸發(fā) updateMessage mutation 來更新 message 狀態(tài)。在 Vuex 的 store 中定義了 message 狀態(tài)和 updateMessage mutation 來更新 message 狀態(tài)。
Vue 的組件通信方式有以下幾種：
父子組件通信：父組件通過 props 向子組件傳遞數(shù)據(jù)，子組件通過 $emit 觸發(fā)事件向父組件傳遞數(shù)據(jù)。
子父組件通信：子組件通過 $emit 觸發(fā)事件向父組件傳遞數(shù)據(jù)，父組件通過 v-on 監(jiān)聽子組件事件并處理數(shù)據(jù)。
兄弟組件通信：可以通過一個共同的父組件作為中介，將數(shù)據(jù)通過 props 和事件分別傳遞給兩個兄弟組件。
跨級組件通信：可以通過 provide 和 inject 來實現(xiàn)跨級組件通信，父組件通過 provide 提供數(shù)據(jù)，子孫組件通過 inject 注入數(shù)據(jù)。
事件總線：可以通過創(chuàng)建一個空的 Vue 實例作為事件總線，用于在任意組件之間傳遞事件和數(shù)據(jù)。
Vuex：Vuex 是 Vue 的狀態(tài)管理庫，可以用于管理全局狀態(tài)和實現(xiàn)組件之間的通信。
需要根據(jù)具體的場景和需求選擇合適的通信方式。
父子組件通信：
父組件：
<template>
<div>
<child-component :message="message" @update-message="updateMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello World'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>
子組件：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
props: {
message: String
},
methods: {
updateMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>
子父組件通信：
父組件：
<template>
<div>
<child-component @update-message="updateMessage"></child-component>
<p>{{ message }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>
子組件：
<template>
<div>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
methods: {
updateMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>
兄弟組件通信：
父組件：
<template>
<div>
<child-component-1 :message="message" @update-message="updateMessage"></child-component-1>
<child-component-2 :message="message"></child-component-2>
</div>
</template>
<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';
export default {
components: {
ChildComponent1,
ChildComponent2
},
data() {
return {
message: 'Hello World'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>
子組件1：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
props: {
message: String
},
methods: {
updateMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>
子組件2：
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
跨級組件通信：
父組件：
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
message: 'Hello World'
}
}
}
</script>
子組件：
<template>
<div>
<grandchild-component></grandchild-component>
</div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';
export default {
components: {
GrandchildComponent
}
}
</script>
孫子組件：
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
inject: ['message']
}
</script>
事件總線：
<template>
<div>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
methods: {
updateMessage() {
EventBus.$emit('update-message', 'New Message');
}
}
}
const EventBus = new Vue();
</script>
Vuex：
Vuex 是 Vue 的狀態(tài)管理庫，可以用于管理全局狀態(tài)和實現(xiàn)組件之間的通信。
以下是一個簡單的示例：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['message'])
},
methods: {
...mapMutations(['updateMessage'])
}
}
</script>
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['message'])
}
}
</script>
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: 'Hello World'
},
mutations: {
updateMessage(state, newMessage) {
state.message = newMessage;
}
}
});
在這個示例中，我們使用了 Vuex 來管理全局狀態(tài)。在父組件和子組件中都使用了 mapState 來獲取 message 狀態(tài)，使用 mapMutations 來觸發(fā) updateMessage mutation 來更新 message 狀態(tài)。在 Vuex 的 store 中定義了 message 狀態(tài)和 updateMessage mutation 來更新 message 狀態(tài)。
