In Vue, transferring values between components is a common operation. There are usually two ways to transfer data: props and events (Event Bus). Below I will introduce these two methods in detail.
1. Pass data through Props
Props are a way of passing data from parent components to child components. In child components, you can declare props and then the parent component can pass data to the child component.
Parent component passes data to child component:
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '我是IT小辉同学'
};
}
};
</script>
Child components receive and use Props:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String // 指定 props 的类型
}
};
</script>
In this example, messageit is a prop whose type is specified as string. Parent component :message="parentMessage"passes data to child component. Of course, we can specify messagethe l type number. At this time, the value we pass will be received normally, but a warning will be reported on the console, so we can pass the value in this way! Of course, sometimes when there is no need to restrict the data type, we can use simple reception and directly receive parameters like this:
props:[name,age,sex]
At the same time, we can also restrict whether parameters are required, which is a more complex parameter transfer restriction, as follows:
props: {
message: {
tyoe: String,
required: true
}
}
2. Pass data through events (Event Bus)
Event Bus is a way to communicate events through Vue instances, allowing decoupled communication between different components. You can use a global Vue instance as an event center, and then trigger and listen for events in the components that need to communicate.
Create a global Event Bus:
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
Trigger the event in the sending component:
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script>
import {
EventBus } from './EventBus.js';
export default {
methods: {
sendMessage() {
EventBus.$emit('message-sent', '你好啊，我是小辉同学！');
}
}
};
</script>
Listen for events in the receiving component:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
import {
EventBus } from './EventBus.js';
export default {
data() {
return {
message: ''
};
},
mounted() {
EventBus.$on('message-sent', message => {
this.message = message;
});
}
};
</script>
In this example, through the Event Bus, the subcomponent can send events to the global event center, and another component can listen and perform corresponding actions when the event is triggered.
Both methods can be used to pass data, but it is recommended to use Props to pass data between parent and child components because it is more clear and maintainable, while Event Bus can be used to handle communication or resolution across multiple components. In the case of coupling, it is more casual!