In , components are the basic unit for building applications. However, when your application becomes complex, communication between components becomes critical. This article will introduce several ways of communication between Vue components to help you better manage and organize your code.
Parent-child component communication
The parent component can be passedpropsPass data to subcomponents, and subcomponents can pass$emitSend events to the parent component.
passpropsPassing data
Parent component passespropsPassing data to subcomponents:
<!-- Parent component -->
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from Parent!'
};
}
};
</script>Subcomponents passpropsReceive data:
<!-- Subcomponents -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>pass$emitSend events
Subcomponents pass$emitSend events to the parent component:
<!-- Subcomponents -->
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from Child!');
}
}
};
</script>Parent component listens for events in child components:
<!-- Parent component -->
<template>
<div>
<child-component @message-sent="handleMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './';
export default {
components: {
ChildComponent
},
methods: {
handleMessage(message) {
(message); // Output 'Hello from Child!' }
}
};
</script>Brother Component Communication
Communication between sibling components is usually achieved through Event Bus or Vuex state management.
Using event bus
Create an event bus:
// import Vue from 'vue'; export const EventBus = new Vue();
Use event bus in sibling components:
<!-- Components A -->
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
import { EventBus } from './';
export default {
methods: {
sendMessage() {
EventBus.$emit('message-sent', 'Hello from Component A!');
}
}
};
</script>
<!-- Components B -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import { EventBus } from './';
export default {
data() {
return {
message: ''
};
},
created() {
EventBus.$on('message-sent', (message) => {
= message;
});
}
};
</script>Using Vuex
Using Vuex is a best practice for managing application status. First install and configure Vuex:
//
import Vue from 'vue';
import Vuex from 'vuex';
(Vuex);
export default new ({
state: {
message: ''
},
mutations: {
setMessage(state, message) {
= message;
}
},
actions: {
updateMessage({ commit }, message) {
commit('setMessage', message);
}
}
});Use Vuex in components:
<!-- Components A -->
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$('updateMessage', 'Hello from Component A!');
}
}
};
</script>
<!-- Components B -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
computed: {
message() {
return this.$;
}
}
};
</script>Summary of father-son component communication and brother component communication
Understanding the communication between Vue components is key to developing complex applications. passpropsand$emitDoing parent-child component communication, as well as using event bus or Vuex for sibling components, you can manage and organize your code more efficiently.
This is the end of this article about the communication between Vue components. For more information about Vue components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!