一、组件之间的关系
父子关系、兄弟关系、跨级关系
二、父子之间数据传递
1、父组件向子组件传递【使用 props】
- 第一步:在父组件中使用子组件时,给子组件绑定属性
- 第二步:在子组件中使用props接收绑定的属性值
2、子组件向父组件传递【使用 $emit】
- 第一步:在子组件中通过$emit触发指定的事件,同时传值
- 第二步:在父组件中给子组件v-on监听事件,同时接收子组件传来的值
- 父组件通过组件名来获得子组件
- 子组件通过parent 获得父组件
- $refs绑定触发子组件的方法或者获得数据
父组件
子组件
4、使用 provide / inject
- 在父组件中通过 provide提供变量
- 在子组件中通过 inject 来将变量注入到组件 中
- 只要调用了 inject 那么就可以注入 provide中的数据
三、兄弟之间传递数据
1、eventBus事件总线(on)
- 本质:是通过创建一个空的 Vue 实例来作为消息传递的对象
- 通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递
- 事件总线就相当于一个桥梁,不用组件通过它来通信 使用步骤如下:
- 创建事件中心管理组件之间的通信
- 发送事件
- 接收事件
2、通过 refs 来获取到兄弟组件,也可以进行通信
四、跨级之间传递数据
1、使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件
【全局事件总线:可以实现任意组件间的数据传递】
标签:vue,在子,通过,传递,事件,组件,inject From: https://www.cnblogs.com/hellofangfang/p/17774981.html