VUE中的组件通信

近期整理了下vue中的组件通信方法，大致可以分为以下4种（个人所了解到的）

1、父传子，父组件中通过给子组件属性绑定数据，而子组件使用pros注册来获取到父组件中传过来的数据。

2、子传父，子组件使用$emit(‘方法名’，传递的数据)，而父组件通过用子组件的方法名来属性绑定一个事件而在这个事件中就可以拿到子组件传来数据啦。

3、事件车(用于兄弟组件中)，首先需要先注册一个新的vue事件（可创建一个新的js文件），其次在全局文件中引入（在prototype中加入此方法），然后兄弟A组件使用事件车.$emit('方法名'，数据)，而兄弟B组件使用事件车.$on(''方法名“，(msg)=>{  this.xx = msg;  })(注意：得用箭头函数来改变this的指向)，此时我们就可以在兄弟B组件中拿到兄弟A组件的数据啦。

4、Vuex，vuex是在项目复杂（即组件多多）的情况下开始使用的，vuex的使用同样也需要引入vue其次再引入vuex,再对vuex进行使用。其中vuex有5个板块，可分为state,getters,mutation,action,module。

• state中可以说是用来保存修改的数据，我们一般通过引用即可拿到该数据。
• mutation则是唯一可以用来修改state中数据的板块，我们一般可以用commit()来调用mutation板块中的方法，从而达到对数据的修改。
• action则是异步修改数据（注意：即使是异步修改了数据，依旧是得在mutation中修改数据。）。
• getters像是vue中的computed属性，可以用来保存缓存数据，往往我们使用getters板块是对数据进行优化，达到我们想要的数据及效果，像是将ABC反转为CBA。其中我觉得更为重要的一点是它能够将vue中的动态数据调用名更加的简洁。（类似这种{ $store.getters.xxx }）