【Vue】非父子组件之间的多种通讯方法，简单易用

方法一、通过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的本地储存

<