关于父子间传值的那些事

刚开始接触公司业务，因为引用vuex的缘故，一直忽略了vue自身的子父传值优势，趁着项目需要，了解父子及非父子之间传值的故事。

1. 首先说一下为什么会用到子父传值以及为什么vuex如此流行。

首先，vuex作为一个数据状态管理工具，使命就是将需共享的变量存储在一个对象中，供全局其他的对象使用。在一般的大的项目中势必数据量较为庞大，同时变量间关系也较为复杂，vuex的应用使得一个状态共享多个不相关的组件，给开发者提供了不少方便的同时，也让项目更易于维护和管理；其次，在遇见数据量不大或者组件之间没有很大耦合性的同时，还是建议使用vue父子/子父/兄弟间传值，毕竟在不添加外来工具的情况下我们的项目会更加轻量。

2. 今天主要在项目的过程中遇见子父传值的问题，就拿出来做一个小总结。

*1* 父子之间传值

由于父子传值是单向的，所以子组件通过props接受父组件的值，并不能改变其值

父子之间传值代码

*2*子父之间传值

此传值是父组件通过引入子组件，监听子组件状态来完成传值

子父之间传值代码

*3* 兄弟之间传值

兄弟之间传值用vuex就能轻松解决，此处不多说，这里主要总结一下引用公共实例文件bus.js的解决方法。可以将其理解为一个公共仓库，用来搭建兄弟之间的桥梁来完成传值。在实际的项目中，公共实例化的文件可以在main.js中创建，以某项目为例，兄弟组件1用$on来监听数据变化，兄弟组件2用$emit来传递变化

兄弟之间传值

next.....