In the Vue framework, communication between components is essential. We can implement communication between components in a variety of ways, including:
1. Parent-child component communication
Parent-child component communication is a common communication method, and parent components can pass data to child components through props attributes. For example:
// 父组件
<template>
<div>
<child-component :message="msg"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
data() {
return {
msg: '父组件传递的消息'
}
},
components: {
ChildComponent
}
}
</script>
// 子组件
<template>
<div>{
{ message }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>
2. Communication between child and parent components
Child-parent component communication is the opposite of parent-child component communication. The child component passes data to the parent component. We can achieve this through custom events. For example:
// 子组件
<template>
<button @click="sendMsg">向父组件发送消息</button>
</template>
<script>
export default {
methods: {
sendMsg() {
this.$emit('my-event', '子组件向父组件发送的消息')
}
}
}
</script>
// 父组件
<template>
<div>
<child-component @my-event="handleMsg"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
methods: {
handleMsg(msg) {
console.log('接收到的消息：', msg)
}
},
components: {
ChildComponent
}
}
</script>
3. Non-parent-child component communication
Sometimes we need to communicate between non-parent and child components, and Vue provides a variety of ways to achieve this.
3.1. Using Event Bus
The event bus is a very convenient communication method. We can define an empty Vue instance and use it as an event center for receiving and distributing events. For example:
// Bus.js
import Vue from 'vue'
export const bus = new Vue()
// A组件
<template>
<button @click="sendMsg">发送消息</button>
</template>
<script>
import { bus } from './Bus.js'
export default {
methods: {
sendMsg() {
bus.$emit('my-event', 'A组件向B组件发送的消息')
}
}
}
</script>
// B组件
<template>
<div>{
{ message }}</div>
</template>
<script>
import { bus } from './Bus.js'
export default {
data() {
return {
message: ''
}
},
created() {
bus.$on('my-event', msg => {
this.message = msg
})
}
}
</script>
3.2. Using Vuex
Vuex is a state management tool for Vue, which provides a centralized storage to manage the state in all components of the application. We can achieve communication between non-parent and child components through Vuex. For example:
// Vuex store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage(state, message) {
state.message = message
}
},
actions: {
setMessage({ commit }, message) {
commit('setMessage', message)
}
}
})
// A组件
<template>
<button @click="sendMsg">发送消息</button>
</template>
<script>
import store from './store.js'
export default {
methods: {
sendMsg() {
store.dispatch('setMessage', 'A组件向B组件发送的消息')
}
}
}
</script>
// B组件
<template>
<div>{
{ message }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState([
'message'
])
}
}
</script>