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

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

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

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

另外一个组件内

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

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


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

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

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

详情可参考 guidebook


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

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

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


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

【热门文章】
【热门文章】