初识Vue-组件通信（详解props和emit）

目录

一、组件通信介绍

1.概念

2.作用

3.特点

4.应用

二、组件通信语法

1.Props

1.1.在子组件中声明 props

1.2.在父组件中传递数据

2.Emit

2.1.在子组件中触发事件

2.2.在父组件中监听事件

三、应用实例

1. 购物车组件

2. 表单数据处理

 四、总结

---

一、组件通信介绍

1.概念

在组件化开发中，一个应用程序通常由多个组件组成。这些组件可能位于不同的层级，有不同的作用和责任。组件通信就是让这些组件之间能够相互交流、传递数据、共享状态或触发行为的机制。

2.作用

1. 传递数据： 父组件可以通过props向子组件传递数据，子组件可以通过emit触发事件向父组件发送消息。
2. 共享状态： 多个组件之间可以共享同一份状态数据，确保数据的一致性。
3. 触发行为： 组件之间可以通过事件触发行为，实现交互功能。
4. 管理全局状态： 使用状态管理工具（如Vuex）进行全局状态的管理和同步。

3.特点

1. 解耦性： 组件通信可以将各个组件解耦，使它们能够独立开发、测试和维护。
2. 灵活性： 可以根据具体需求选择不同的通信方式，如props / emit、$emit / $on、Vuex等&