vue组件之间通信

组件之间的通信

组件之间的通信方式有子传父，父传子，兄弟组件传值，祖孙组件传值，vuex。

1.父传子：

将父组件要传递的数据放入子组件的标签中（可传递静态属性，动态属性），在子组件中用props进行接收。在props中可以进行数据类型的验证，如果接收的是不符合的数据类型，vue会在浏览器控制台中警告你。

2.子传父：

通过事件发射进行传值，在子组件内发射，在父组件内接收。在子组件标签内设置自定义事件，自定义事件第一个参数为自定义事件名称，第二个参数为传递的数据。在父组件创建与子组件中自定义事件中对应的方法，在其中进行接收或则数据处理操作。

3.兄弟间组件传值：

通过事件总线进行传值，首先创建一个Vue实例作为事件总线，在传值的组件中使用$emit进行事件发射，在接收值的组件中使用 $on进行接收。

4.爷孙组件传值：

祖先组件使用provide方法提供传递的数据，在provide方法中返回要传递的数据，在后代组件中使用inject方法进行数据接收。

5.Vuex传值：

vuex是一个vue插件，是状态机，是一种状态管理模式，主要作用是使可复用组件之间进行数据共享。Vuex有五个属性，分别是state，getters，mutation，action，module。
state是用来存储公共数据的，
getters是一个和computed相似的计算属性，getters中的返回值会根据它的依赖值被缓存起来，只有当依赖值发生改变时，才会重新计算。
mutation（突变）是唯一改变state中数据的方式，在其中定义的方法默认传递参数state但在mutation中不能进行异步操作，会造成数据无法跟踪，
Action中可以进行异步操作，在其中定义的方法一般有两个参数，一个是mutation中的方法名，另一个是要传递的参数。通过异步请求得到的数据，通过.Commit方法提交给突变事件，第一个是参数是突变事件，第二个参数是异步请求得到的数据。
modules是模块化时，所用到的属性，当我们的所需要的共享的状态很多时，我们就需要进行分模块化，每个模块可有自己的state，getters，mutation，action属性，还可能嵌套子模块，通过namespaced设置命名空间。然后在modules中统一导出。