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表达式写法。