携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
- 子组件向父组件传值
- 需要通过自定义事件实现
- 案例：商品为子组件，购物车为父组件，父组件需要统计商品个数，就需要在子组件个数变化时传值给父组件
- 父组件设置如下👇
子组件设置如下👇
- 子组件数据变化时，通过$emit()触发自定义事件；自定义事件名称建议使用kebab-case
- 父组件监听子组件的自定义事件，并设置处理程序
- 子组件向父组件传值-自定义事件传值
- 子组件触发事件时可以向父组件传值。$emit中的数字来传递变化的数值
- 父组件在监听事件时需要接受子组件传递的数据
- 方法一：
- 方法二：
- 方法一：
- 子组件触发事件时可以向父组件传值。$emit中的数字来传递变化的数值
- 子组件向父组件传值-组件与v-model
- v-model用于组件时，需要通过props与自定义事件实现
子组件设置方式
另一种写法
- v-model用于组件时，需要通过props与自定义事件实现
- 非父子组件传值
- 指的是兄弟组件或完全无关的两个组件
- 非父子组件传值-兄弟组件传值
- 通过父组件进行数据中转
- 通过父组件进行数据中转
- 非父子组件传值-EventBus
- 当组件嵌套关系复杂时，根据组件关系传值较为繁琐
- 组件为了数据中转，data中会存在许多与当前组件功能无关的数据
- EventBus（事件总线）是一个独立的事件中心，用于管理不同组件间的传值操作
- EventBus通过一个新的Vue实例来管理组件传值操作，组件通过给实例注册事件、调用事件来实现数据传递
- 操作步骤
- 发送数据的组件触发bus事件，接收的组件给bus注册对应事件
- 给bus注册对应事件通过$on()操作
- 发送数据的组件触发bus事件，接收的组件给bus注册对应事件
本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!
