vue组件之间的多种通信方法

vue是一种mvvm框架，它相对于jQuery可能比较大的差异点之一就在于组件之间的通信了。这里提供三种不同情况下vue组件的通信方式。http://www.jianshu.com/p/a78277be91d0

一. vue父子组件通信

vue父子组件通信可以用Vue.$emit自定义事件来解决。

// 父组件<single-address @edit-address="editAddress"></single-address>

// 子组件methods: { editAddress () {  this.$emit('edit-address', false) }}

当然也可以使用props方式解决。

// 父组件<one-address :addressitems="addressitems"></one-address>// 子组件<div>{{ addressitems.partment }}{{ addressitems.address }}</div>export default {  props: {    addressitems: Object  }}

二. 非父子组件通信

非父子组件通信同样也可以用Vue.$emit自定义事件来解决

var bus = new Vue()// 组件Abus.$emit('id-selected', 1)// 组件Bbus.$on('id-selected', function (id) { console.log(id)})

三. vue跨组件跨模块通信

虽然父子组件，非父子组件间的通信vue都可以有办法解决，但是如果项目结构复杂化以后，这样的自定义事件变多以后代码难以管理，所以还是建议使用vuex。
接下来就讲一讲vuex这个东西吧。vuex，官方的说法就是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。如果之前没有接触过应用状态管理这一块的内容的话，可能光看文档是很难看明白的。按个人的理解来说，vuex最大的作用就是把部分父子组件之间频繁的通信过程简单化，所以，对于一些父子组件通信并不频繁的情况来说，并不应该使用vuex，当然这也意味着，如果你对父子组件之间的通信还不是很明确的话，可以先学习一下这一块的知识。
vuex有四个核心概念，其中state和getters主要是用于数据的存储与输出，而mutations和actions是用于提交事件并修改state中的数据。
也是以购物车的业务来举例，首先由于vue的限制，页面中所有的数据都需要一个初始化，这样才能在之后业务逻辑中响应式地修改数据（修改数据的同时变化页面内容）。这里我们可以在vue组件中使用ajax获取数据，获取到的数据直接赋给state中的数据：

// global.Domain.centerUrl是我自己定义的全局变量，这种就可以更方便的管理前端数据请求接口的地址了      getDataFromBackend () {        this.$http({          method: 'get',          url: global.Domain.centerUrl + 'order'        }).then(function (response) {          let res = response.data          // state.order是因为我对整个应用进行了分模块的设计，order是我其中的一个模块，后面会讲如何划分模块          // $store是vue实例的全局属性，这个属性可以直接获取vuex状态树中的所有state数据          this.$store.state.order.orderitems = res.orderitems        })      }

getters的用法与计算属性基本一致，computed会用的话那这个也基本就会用了。
接下来就是重头戏mutations了。mutations原意是突变，这里可以理解为立即修改吧。也就是说，mutations可以修改state中的数据，但是有一个限制，那就是只能同步修改，而不能异步，你想要按个定时器过2秒钟修改state，那对不起了您哪，不行。但是，想要异步修改state，也不是不行，光靠mutations一个人是不行的了，还得要靠actions，而且actions还不能直接操作state，他需要异步提交给mutations，然后再由mutations同步修改state数据。听上去挺麻烦的一件事情啊，还是直接看代码吧。

  mutations: {    correctIfcollect (state) {      state.ifcollectwrap = true    },    modifyIfcollect (state) {      state.ifcollectwrap = false    },    // 收藏成功事件    collectSuccess (state) {      state.ifcollect = true      state.collectmsg = '收藏成功'    },    // 取消收藏事件    collectCancel (state) {      state.ifcollect = false      state.collectmsg = '取消收藏'    }  },  actions: {    // actions有一个必要的参数commit，用于提交事件到mutations中    collectPopup ({commit, state}) {      let oTimer = ''      clearTimeout(oTimer)      if (!state.ifcollect) {        commit('collectSuccess')        commit('correctIfcollect')        oTimer = setTimeout(function () {          commit('modifyIfcollect')        }, 2000)      } else {        commit('collectCancel')        commit('correctIfcollect')        oTimer = setTimeout(function () {          commit('modifyIfcollect')        }, 2000)      }    }  }

    // 假如有数据需要从组件传到actions中时，需要两个大括号，第一个大括号放commit或者state这类vuex参数，而第二个大括号放传进来的参数    // 这里使用vuex actions调用了两个mutations的方法实现一个功能，是因为第二个函数中有一个参数是需要第一个函数提供的    changePos ({commit}, {index}) {      commit('changeHandle', index)      commit('changePos', index)    }

总的来说，在我看懂了vuex以后，我总是觉得有一个vuex来分担一下data的功能那是再好不过了，这样不光能够更好地管理我的应用，同时也能够提高我.vue单文件的可读性。
那么这里就有一个问题了，我们都知道一个稍微大一点的项目，那数据量都是很多的，如果整个项目里的数据都写在一个vuex文件里的话就显得整个文件太大太重了，这与我们想要提高文件的可读性是相悖的。所以我们需要有一个分模块的意识来管理vuex，管理应用的状态。
而vuex也正好提供了这个功能（vuex还真的是够强大），在具体使用的过程中，我会先把那些需要与其他组件交互的组件中的数据都提取出来放到vuex里面管理，而那些完全没有交互的数据还是放在组件的data中，例如标识该组件的标题数据等等。然后，这里我们就可以用到vuex的模块管理功能，愉快地把数据按照组件之间的功能联系来分离，并把它们拆分到一个个小文件中啦。

// 这是vuex总的管理文件，将各模块统一在一起，从而将每一个分支都连接到vuex这个总的状态树上// 引入vueimport Vue from 'vue'// 引入vueximport Vuex from 'vuex'// 引入应用状态管理import goodshandleStore from './goodshandle'import orderStore from './order'import addressStore from './address'import shopcarStore from './shopcar'import merchantStore from './merchant'import couponStore from './coupon'Vue.use(Vuex)export default new Vuex.Store({  modules: {    handle: goodshandleStore,    order: orderStore,    address: addressStore,    shopcar: shopcarStore,    merchant: merchantStore,    coupon: couponStore  }})