背景:
在公司开发的组件库中,组件之间的共享值使使用vuex的方式,这种方法严重依赖了vuex,在组件使用的时候有需要把vuex的实例传递进去创建组件需要的vuex状态。在重构组件时候,明确目标就是:组件库不能依赖于vuex传递值。于是想到了最原始的方法props和$emit的方式去传递值,这种方法在组件层级不深时候是很方便的,但是组件层级太深,有会使props和触发事件的链路过长。就目前来言初步定下provide / inject方式做到组件共享状态值。
具体实现:
父组件:
子组件:
注意:provide 和 inject 绑定并不是可响应的,所以可以在provide 将注入的值写成一个响应式的对象
写成响应式对象的形式:(这样provide 改变了 inject 的组件也会跟着响应)
参考code:https://github.com/wxStart/vueTestCode/tree/provide_inject 测试代码地址