持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情juejin.cn/post/714765…

父向子传值

在vue中，可以通过props向子组件传递数据
如下所示：
1.父组件：

2.子组件

props还有很多种验证类型

子向父传值

在vue中this.$emit（‘自定义事件’，传递的参数），触发自定义事件并且可以传参（$emit创建自定义事件）
子向父：
子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件，事件内将需要的值作为this.$emit的第二个参数传给响应自定义事件的方法，在父组件中注册组组件并在组件标签上绑定对自定义事件的监听。
如下所示：
父组件:

子组件：

非父子组件传值（没有关系的组件）

也是利用自定义事件
通过$emit/$on传值($on监听$emit)
这种方法通过一个空的vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量的实现了任何组件见得通信，包括父子、兄弟、跨级。当我们的项目比较大时。可以选择更好的状态管理解决方案。

1. 先创建一个空的vue实例作为中央事件总线（相当于中转站一样），示例如下：
   

2.发送值由上面的Bus来发布。通过$emit.$emit有两个参数，一个是自定义的事件名，一个是要传递的数据。如下所示：

3.接值由Bus来接值。通过$on，有两个参数，一个是监听传值的那个自定义的事件名，另一个是回调函数，接收的参数就是传递过来的数据，注意：如果是this的话记得要用箭头函数。如下所示：