Vue 是一個流行的 JavaScript 框架，用於建立單頁應用程式。在 Vue 中，元件是建立應用程式的基本單位，元件是用於顯示和處理資料的可重複使用程式碼區塊。元件通訊是元件之間資料傳遞和互動的核心機制之一。在本文中，我們將探討六種組件通訊方式。
一、Props 和 Events
Props 和 Events 是 Vue 中最基本的元件通訊方式。透過 props，父元件向子元件傳遞資料。而子元件則透過 events 建構函式向父元件發送資料。這種通訊方式的特徵是單向傳遞。
父元件透過props 將資料傳遞給子元件：
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
data() {
return {
parentMessage: 'this is parent'
}
},
components: {
ChildComponent
}
}
</script>在子元件中，需要宣告props，並使用props 接收來自父元件的資料：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>然後，子元件透過events 發送資料給父元件：
<template>
<button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
export default {
methods: {
updateParentMessage() {
this.$emit('update-message', 'this is child');
}
}
}
</script>在父元件中，需要為子元件監聽events，在事件監聽函式中接收來自子元件的資料：
<template>
<child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
data() {
return {
parentMessage: 'this is parent'
}
},
components: {
ChildComponent
},
methods: {
updateMessage(message) {
this.parentMessage = message;
}
}
}
</script>二、Vuex
Vuex 是Vue 中用於狀態管理的一個官方外掛程式。 Vuex 實作了一個全域的狀態管理模式。它透過 store 集中管理應用程式的所有元件的狀態。當多個元件共用狀態時，使用 Vuex 可以更方便地管理元件之間的資料交換和通訊。
首先，我們需要建立一個Vuex store：
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
message: 'hello world'
},
mutations: {
updateMessage(state, message) {
state.message = message
}
},
actions: {
updateMessage({ commit }, message) {
commit('updateMessage', message)
}
},
getters: {
getMessage: state => state.message
}
})
export default store在元件中，我們可以使用$store 存取store 中的狀態，使用commit 方法來提交mutations 來修改狀態：
<template>
<div>{{ this.$store.getters.getMessage }}</div>
<button @click="updateMessage">Update Message</button>
</template>
<script>
export default {
methods: {
updateMessage() {
this.$store.dispatch('updateMessage', 'hello vuex')
}
}
}
</script>三、$parent 和$children
Vue 中的每個元件都具有$parent 和$children 屬性。 $parent 屬性指向元件的父元件，$children 屬性指向元件的子元件。透過 $parent 和 $children 屬性，元件可以直接存取父元件和子元件的資料和方法。
例如，父元件可以透過$children 屬性存取子元件的資料和方法：
<template>
<div>
{{ $children[0].message }}
<button @click="$children[0].updateMessage">Update message</button>
</div>
</template>在子元件中，需要定義message 和updateMessage 方法：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'hello child'
}
},
methods: {
updateMessage() {
this.message = 'hello parent'
}
}
}
</script>四、$refs
Vue 中的每個元件都具有$refs 屬性。 $refs 屬性是一個對象，包含了在元件中使用 ref 屬性命名的子元件或 DOM 元素的參考。透過 $refs 屬性，元件之間可以相互引用和呼叫。
例如，我們可以在父元件中透過ref 屬性取得子元件的參考：
<template>
<div>
<child-component ref="childComponent"></child-component>
<button @click="updateMessage">Update message</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
updateMessage() {
this.$refs.childComponent.updateMessage()
}
}
}
</script>在子元件中，我們需要定義updateMessage 方法：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'hello child'
}
},
methods: {
updateMessage() {
this.message = 'hello parent'
}
}
}
</script>五、 Event Bus
Event Bus 是一種廣泛使用的中央事件系統，可在Vue 元件之間有效地傳遞事件。 Event Bus 是一個簡單的 Vue 實例，可以透過 $emit 方法向其他 Vue 元件傳送事件，也可以透過 $on 方法接收其他 Vue 元件所傳送的事件。
在實作Event Bus 時，我們需要建立一個新的Vue 實例：
import Vue from 'vue' const bus = new Vue() export default bus
然後，我們可以在元件中引入Event Bus 並使用$emit 發送事件，使用$on 接收事件：
// 发送事件
import Bus from './Bus.js'
Bus.$emit('event-name', data)
// 接收事件
import Bus from './Bus.js'
Bus.$on('event-name', (data) => {
console.log(data)
})六、Provide 和Inject
Vue 2.2 中新增的Provide 和Inject 是一種高階的元件通訊方式。 Provide 和 Inject 讓父元件將資料傳遞給所有後代元件，而不是只傳遞給直接子元件。 Provide 和 Inject 是一種不同於 props、events 和 $parent/$children 的元件通訊形式，是一種更靈活和封裝性更強的通訊方式。
父元件透過provide 提供資料：
<template>
<child-component></child-component>
</template>
<script>
export default {
provide: {
message: 'hello provide'
}
}
</script>在子元件中，我們需要定義inject 接收父元件傳遞的資料：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['message']
}
</script>這就是六種Vue 元件通信方式的介紹。不同的應用場景需要採用不同的元件通訊方式。掌握這些通訊方式可以讓 Vue 元件的開發更有效率、簡單、更靈活。
以上是Vue 組件間通訊的六種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
