组件间的通信方式

组件与组件间数据传递

组件关系分类

1. 父子关系

2. 非父子关系

通信解决方案

父子关系：props和$emit

非父子关系（爷孙）：1.provide&inject

2.eventbus

终极解决方案：Vuex

父子通信流程

1. 父组件通过 props 将数据传递给子组件

2. 子组件利用 $emit 通知父组件修改更新

父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

父向子传值步骤

1. 给子组件以添加属性的方式传值

2. 子组件内部通过props接收

3. 模板中直接使用 props接收的值

子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知

2. 父组件监听$emit触发的事件

3. 提供处理函数，在函数的性参中获取传过来的参数