Vue 开发时，如果使用多个组件的形式，组件内的数据可以共享吗

Question

比如一个组件的data包括下面这些数据

  module.exports = {
        data:function(){
            return{
                room:''
            }
        }
    }

另外一个组件内

  module.exports = {
        data:function(){
            return{
                hall:''
            }
        }
    }

这两个组件的数据可以共享吗

Answer 1

组件数据共享要根据组件间关系构造数据流动机制
1.父子组建嵌套
子组件通过props继承父组建的数据，虽然vue中子组件可以通过$parent 和 $children访问父子组建但不利于解耦
2.兄弟组建间
使用观察者模式，建立消息体制。

vue components 天生对自定义事件有良好的支持：

每个 Vue 实例都是一个事件触发器：
使用 $on() 监听事件；
使用 $emit() 在它上面触发事件；
使用 $dispatch() 派发事件，事件沿着父链冒泡；
使用 $broadcast() 广播事件，事件向下传导给所有的后代。

详情可参考 guidebook

Answer 2

可以把公共的部分用Vue.extend

var common = Vue.extend({
  data() {
    return {
      room: ''
    }
  }
});

如果组件间数据相互防问，可以用广播$dispatch()和$broadcast()

Answer 3

可以使用vuex,有些时候还需要借助localStorage