VUE非父子组件之间通信的几种方式

一.使用广播的方式$emit(), $on()

1.创建js文件

import Vue from 'vue'

export default new Vue()

组件A

import bus from '../../static/js/commonvue'

mounted() {
	bus.$emit('componentsA', ‘组件A的值’);  //传值
}

组件B

import bus from '../../static/js/commonvue'

mounted() {
  bus.$on('componentsA', (value) => {  // 接收值
    console.log("组件B：", value); 
  })
}

用一个空的 Vue 实例（Bus）来做中央事件总线更加清晰也易于管理。但前提是两个组件必须渲染完成后才能实现通信，如果组件A销毁，那么将无法完成通讯。

二.使用vuex

我们可以把公用的数据使用vuex来进行存储，可以在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

Vuex的使用，首先是安装

npm install vuex –save

1.创建一个js文件

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

Vue.use(Vuex)

// 存储共用的数据
export default new Vuex.Store({
  state:{
    value:"vuex值"
  }
})

2.在main.js文件中引入

import store from '../static/js/commonvue'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.使用时直接调用
组件A

mounted() {
	this.$store.state.value = “组件A的值”;  //修改值
}

组件B

mounted() {
   this.msg = this.$store.state.value；//接收值
}

三.使用Vue.prototype

使用prototype原型挂载属性，作为全局变量

1.创建js文件，声明变量

let gl_value = undefined;
export default {gl_value};

2.main.js文件中添加

import gl_value from '../static/js/commonvue' 
Vue.prototype.$GLOBAL = gl_value;

3.调用
组件A

mounted() {
	this.$GLOBAL.gl_value = “组件A的值”;  //修改值
}

组件B

mounted() {
   this.msg = this.$GLOBAL.gl_value；//接收值
}