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 组件的开发更加高效、简单和灵活。
