Component communication is a very important concept in Vue, which can help you pass data and events between different components. If you are new to Vue, you may find component communication a bit complicated, but don't worry, I will use humorous language and simple examples to help you understand it.
First, component communication can be divided into two types: parent component to child component communication, and child component to parent component communication. Below I will introduce these two types of communication methods separately.
Parent component to child component communication
Parent component to child component communication can be achieved through props. Props is a property used to receive data passed by the parent component, which can be used in child components. Here is a simple example:
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
In the above example, we used Vue's template syntax to define a parent component. We use tags in the template to introduce child components, and use :message to pass a data named parentMessage to the child components. In the data function of the parent component, we define the value of parentMessage as 'Hello from parent!'.
In the child component, we can receive the data passed by the parent component through props. Here's a simple subcomponent example:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
}
};
</script>
In the above example, we defined a prop called message which is of type string. In the template, we use the double bracket syntax to display the received message value. When we render this child component, it will display the string 'Hello from parent!'.
Communication from child components to parent components
Communication from child components to parent components can be achieved through the event system. The event system allows child components to trigger an event and listen for this event in the parent component. Here is a simple example:
Parent component:
<template>
<div>
<child-component @child-event="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(message) {
console.log(`Child component triggered event with message: ${
message}`);
}
}
};
</script>
In the above example, we used Vue's template syntax to define a parent component. We use tags in the template to introduce child components, and use @child-event to listen to events triggered by child components. In the method of the parent component, we define the handleChildEvent method to handle the event triggered by the child component.
Subassembly:
<template>
<div>
<button @click="triggerEvent">Trigger Event</button>
</div>
</template>
<script>
export default {
methods: {
triggerEvent() {
this.$emit('child-event', 'This is a message from child component!');
}
}
};
</script>
In the above example, we use Vue's template syntax to define a child component. We define a button in the child component and use @click to listen for user click events. In the method of the child component, we define the triggerEvent method to trigger an event named child-event, and pass a message string as a parameter.
When the user clicks the button in the child component, the triggerEvent method is called and an event named child-event is triggered. The parent component listens to this event by using @child-event and handles this event in the handleChildEvent method. When a parent component receives an event triggered by a child component, it outputs a log message containing a message string.
This is the basic principle of component communication. Through the props and event system, you can pass data and trigger events between different components in your Vue application. This can help you better organize your code and make your application easier to maintain and extend.