Vue页面中的通信方式详解-Hello-子组件接收这些数据

作者：机器人技术佬 | 发布时间：2025-07-09 |

Vue页面中的通信方式详解

一、父子组件通信

1. Props

父组件向子组件传递数据，就像在子组件上贴标签一样。

父组件：在子组件标签上添加属性传递数据。

子组件：接收这些数据。

示例代码：

``` // 父组件 ```

四、全局状态管理

使用Vuex进行全局状态管理。

示例代码：

``` // 安装Vuex并配置Store import { createStore } from 'vuex'; const store = createStore({ state() { return { message: 'Hello from Vuex!' }; } }); // 在组件中访问和修改全局状态 store.commit('setMessage', 'Updated message'); console.log(store.state.message); ```

五、事件总线

创建事件总线，适用于不需要全局状态管理的场景。

示例代码：

``` // 创建事件总线 const eventBus = new Vue(); // 发送事件 eventBus.$emit('message', 'Hello from event bus!'); // 接收事件 eventBus.$on('message', (message) => { console.log(message); }); ```

Vue页面通信方式主要有父子组件通信、兄弟组件通信、跨层级组件通信、全局状态管理和事件总线。每种方式都有其适用的场景和实现方法，开发者可以根据具体需求选择合适的通信方式。