vue 都是组件化的开发模式.
整个组件树中,组件和组件之间的关系如下图所示.
父子组件传值一般用 props & events 即可.
但是非父子组件之间,如何传值会有很多的解决方案.
一般都建议使用 vuex 官方提供的集中式状态管理工具.
但此方案有可能过于笨重,写起来也并不方便,还需要专门引入 vuex 库,增大项目的打包体积.
使用 store 模式来解决组件间数据状态共享的问题.
store 模式的核心很简单:
定义一个很简单的全局单例对象,此提供一些数据,在组件间共享.
将此对象定义在需要使用到的组件,并设置在 data 属性上即可.
A 组件需要使用.
B 组件需要使用.
效果:
总结:
第二种,使用一个 new Vue 实例,去承载共享数据的功能. 实例内部的 methods , computed , watch 等,可以用于对数的监视和控制.
在 A 组件上使用
在 B 组件上使用
效果:
总结:
码云地址