在 Vue 中，组件之间传值是一个常见的操作，通常有两种方式来传递数据：props 和事件（Event Bus）。下面我将详细介绍这两种方式。
1. 通过 Props 传递数据
Props 是一种用于从父组件向子组件传递数据的方式。在子组件中，你可以声明 props，然后父组件可以将数据传递给子组件。
父组件向子组件传递数据：
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '我是IT小辉同学'
};
}
};
</script>
子组件接收并使用 Props：
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String // 指定 props 的类型
}
};
</script>
在这个例子中，message 是一个 prop，它的类型被指定为字符串。父组件通过:message="parentMessage"将数据传递给子组件。当然，我们可以指定messagel类型为number，这个时候我们传值也会正常接收，但是会在控制台报出警告，所以呢，我们可以通过这种方式去进行传值！当然，有时候对于数据类型不用进行限制的时候，我们可以使用简单接收，直接这样接参：
props:[name,age,sex]
同时，我们可以对于参数是否为必填也做限制，这样就是比较复杂的传参限制了，如下：
props: {
message: {
tyoe: String,
required: true
}
}
2. 通过事件传递数据（Event Bus）
Event Bus 是一种通过 Vue 实例进行事件通信的方式，允许不同组件之间进行解耦的通信。你可以使用一个全局的 Vue 实例作为事件中心，然后在需要通信的组件中触发和监听事件。
创建一个全局的 Event Bus：
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
在发送组件中触发事件：
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script>
import {
EventBus } from './EventBus.js';
export default {
methods: {
sendMessage() {
EventBus.$emit('message-sent', '你好啊，我是小辉同学！');
}
}
};
</script>
在接收组件中监听事件：
<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>
在这个例子中，通过 Event Bus，子组件可以向全局事件中心发送事件，而另一个组件可以监听并在事件触发时执行相应的操作。
这两种方式都可以用来传递数据，但建议使用 Props 来传递父子组件之间的数据，因为它更具有明确性和可维护性，而 Event Bus 可以用于处理跨越多个组件的通信或解耦的情况，更加随意！