Vue组件之间进行传值的两种方式-编程知识

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>