Vue组件之间进行传值的两种方式

在 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 可以用于处理跨越多个组件的通信或解耦的情况，更加随意！