方法一、通过Vue提供的bus.js进行通讯,实现数据的传递和联动
bus.js
import Vue from 'vue'
/**
* 定义空的vue实例,作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast)
*/
let eventBus = new Vue({});
export default eventBus;
注意:bus一定要在一个组件能先去创建 $emit,然后另一个组件再去接收 $on
一个组件创建数据
import bus from 'bus.js'
methods:{
sendmsg(){
bus.$emit('vuedata',666);
}
}
另一个组件接收数据
import bus from 'bus.js'
mounted:{
bus.$on('vuedata',function(data){
console.log(data);
});
}
方法二、通过浏览器本地储存localstorage进行通讯
通过setItem设置一个Key为vuedata,Value为666的本地储存
<