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

news2025/1/15 20:02:00

在这里插入图片描述

在 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>