Vue组件通信的两种方法

Vue组件通信有几种情况，父->子，子->父，或是非父子关系的组件间通信。我们这里讨论的是比较普遍的情况，也就是非父子关系组件间的通信。当然，如果它们是父子关系，也是可以用这些方法的。我们这里介绍两种方法，一是使用Vuex组件，二是使用Bus。

一、Vuex组件

Vuex是一个专门用于状态管理的组件。所谓状态，就是一个变量值，一个组件使用这个变量的值，如果另一个组件修改了这个变量的值，第一个组件就会收到变化通知。可以理解为一个全局静态变量。

要使用Vuex，首先要安装它。

npm install vuex --save

然后我们新建一个store.js的文件：

import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        state1: "1"
    },
    mutations: {
        changeState1(state, newState) {
            state.state1 = newState;
        }
    }
});

export default store;

然后我们需要在main.js里添加如下代码：

import store from './store'


new Vue({
  el: '#app',
  router,
  store, //添加在这里
  components: { App },
  template: '<App/>'
})

这样，我们就可以开始使用state1这个状态了。

例如在组件1里面，我们这样使用state1：

<div>{{this.$store.state.state1}}</div>

我们会看到div里面的内容是1。

如果我们需要在组件2里修改state1的值，可以使用以下代码：

this.$store.commit("changeState1","2");

这样，组件1里面显示的内容就会变成2。

这就是Vuex的简单用法，更复杂的功能可参考官方文档。

Vuex有一个缺点就是，它只能操作状态。如果组件1想调用组件2里面的方法，要怎么做呢？这就要用到Bus的方法了。

二、Bus方法

Bus方法，说白了，就是定义一个全局静态的对象，里面可以定义变量，也可以定义命令。此方法不需要引入额外的插件，使用Javascript和Vue原生的功能即可。

首先在main.js里面书写以下代码：

Vue.prototype.bus = new Vue();

然后就可以开始用了！

我们先说全局变量。组件1里面可以这样设置变量：

this.bus.state1="1"

然后我们在组件2里使用：

<div>{{this.bus.state1}}</div>

是不是很简单！

然后我们要说一说组件间调用方法的问题。假如组件1要调用组件2里面的方法，我们要这么做：

1、在组件2的mounted方法里定义事件监听：

mounted() {
  this.bus.$on("func1", data => {
    //handle data
  });
}

2、然后，在组件1里发起事件：

this.bus.$emit("func1", "data")

这样，func1就会被调用了。

这里有一点需要注意，网上很多on的写法是这样的：

mounted() {
  this.bus.$on("func1", function(data) {
    //handle data
  });
}

但你很快会发现，方法里没办法访问data()里定义的变量，“this.变量名”全都是undefined。所以，一定要使用lambda表达式写法。