比如一个组件的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