vue2 普通组件之间共享数据

页面中多个没有关系的组件，共享一个数据，不使用vuex

方法一，共用一个js对象：

// testStore.js
export let testStore = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

// comA.vue
import { testStore } from '../testStore'

...
data () {
    return {
      testStore,
...
mounted () {
    this.setTableData()
    setTimeout(() => {
      this.testStore.setMessageAction('xxxxxx')
    }, 3000)
  }

// comB.vue
类似comA.vue

方法二，事件总线eventBus：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// comA.vue
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  },
  beforeDestory () {
    EventBus.$off()
  }
}; 
</script>


// comB.vue
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  },
  beforeDestory () {
    EventBus.$off()
  }
};
</script>

EventBus参考资料：https://zhuanlan.zhihu.com/p/72777951