3.4扩展：Vue.js 3的组件通信

Vue.js 3 中的组件通信允许组件之间传递数据和事件,进而实现组件之间的状态同步。在Vue.js 3 中组件通信一般分为三类：父子组件通信、兄弟组件通信、跨层级组件通信，详细介绍如下。

（1）父子组件通信

① 父组件向子组件传值

父组件向子组件传递数据通过“props”属性实现，父组件在模板中使用“v-bind”将数据绑定到子组件的“props”上，子组件在“<script setup>”语法糖中通过“defineProps”来接收数据。

父组件（ParentComponent.vue）中定义“parentTitle”、“parentMessage"，通过“:title”，“:message”将值传递给子组件，示例代码如下。

子组件（ChildComponent.vue）通过“title”，“message”接收父组件“parentTitle”、“parentMessage"的值，并进行展示，示例代码如下。

父组件向子组件传递数据实现如图3-4-1所示。

② 子组件向父组件

子组件向父组件传递数据通过自定义事件实现，父组件在模板中使用“v-on”（或简写为@）添加监听事件，子组件使用“defineEmits”方法触发事件，将值传递数据给父组件。

父组件（ParentComponent.vue），定义“@send-data”接收数据，通过handleData函数处理接收的数据，示例代码如下。

子组件（ChildComponent.vue）通过defineEmits定义事件数组，数组中包含“send-data”，在点击发送数据时，调用“sendData”方法，使用“emit”通过“send-data”事件将"Hello from child!"数据传递给父组件，示例代码如下。

子组件向父组件传递数据如图3-4-2所示。

（2）兄弟组件通信

兄弟组件之间不能直接通信，需要将数据通过“emit”发送给父组件，父组件再将数据发送给另一个兄弟组件，通过“props”接收。

父组件先接收子组件A的数据“handleDataFromChildA”，再将数据通过“::dataFromChildA”将数据传递给子组件B，示例代码如下。

子组件 A (ChildA.vue)中的代码示例如下。

子组件 B (ChildB.vue)中的代码示例如下。

兄弟组件通信如图3-4-3所示。

（3）跨层级组件通信

Vue.js 3提供了“provide”和“inject”选项来实现跨层级的组件通信。祖先组件可以使用“provide”选项来提供数据，后代组件则可以通过“inject”选项来接收数据。

父组件 (GrandParent.vue)中通过“provide”提供数据，示例代码如下。

子组件 (Parent.vue)中，通过inject接收数据，示例代码如下。

孙组件 (Child.vue)，使用“inject”接收数据，代码示例如下。

跨层级组件通信如图3-4-4所示。

3.5扩展：结合Vuex 实现路由状态管理

Vuex是Vue.js 3的官方状态管理模式，用来集中式存储和管理组件的状态，使用单一状态树，用一个对象包含全部的应用层级状态，通过Vue.js 3的响应式实现状态与视图的同步。

Vuex的工作原理是强制维持一个从顶级组件到子组件的单向数据流。所有的状态变更都必须提交到mutation完成state数据的更改，而state是响应式的，所以当state中的数据发生变化时，所有依赖于这些数据的组件都会自动更新，以此实现全局状态的共享。Vuex的核心是一个名为“store”的容器。

Vuex主要由以下5个部分组成：

（1）State：存储的全局状态数据。

（2）Getters：计算属性，类似于组件中的computed属性。依赖于state中的某些状态，并且只有在相关状态改变时才会重新计算。

（3）Mutations：提交更改state中状态的唯一方法。与state同步，用于执行实际的状态变更。

（4）Actions：类似于mutations。Action可以包含任意异步操作，并且最终通过提交（commit）mutation来变更state。

（5）Modules：允许将store分割成模块（module）。每个模块都拥有state、getters、mutations、actions。

控制路由是为了处理复杂的应用状态,确保路由和应用状态之间的同步。使用Vuex控制路由的目的通常是为了以下几点:

（1）应用状态的版本控制:通过Vuex跟踪应用的状态变化，在用户刷新页面时能够恢复到正确的状态。

（2）权限控制:在Vuex中控制用户的权限,控制路由的访问。

（3）处理异步数据和导航:在解析异步数据并确定路由导航到下一个路由之前，需要等待数据加载完毕。

创建示例说明如何在Vuex中实现路由状态管理，具体步骤如下。

① 安装Vuex，执行命令“npm install vuex”，如图3-5-1所示。

② 配置Vuex Store，在“src”文件夹下创建“store” 文件夹，在“src\store”文件夹下创建 index.js,代码示例如下。

③ 在“src\views”文件夹下创建“Login.vue” 文件,代码示例如下。

③ 修改“src\main.js”文件，全局引入Vuex,代码示例如下。

创作说明

名称：编程指南-Vue.js 3前端开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙