Vue使用provide-inject特性注入皮肤配置
January 03, 2020
背景
H5页面主题皮肤切换，有2条路线，一是使用css实现，一是使用js实现。
其实需求很简单，希望组件本身可以和皮肤主题解耦，这样至少有2个好处：
- 更改的时候只用在皮肤设置文件更改一次
- 组件本身与主题样式无关，只在需要的时候把组件和主题组合使用，有足够的灵活性
现有方案的问题
现有方案使用的less，在每个组件中引入less variables，然后再按照css规则渲染主题。
其实已经基本够用了，只是必须每个组件分别编写对应主题下的规则，引入了主题和组件的强耦合，不是特别好的设计，也无法做到实时更改主题。
本来可以用sass的mixin，但同事都比较排斥sass，只好放弃。
于是考虑尝试js的方案。
JS的方案
搜索的过程中看到了vuetify，它的主题实现就用的provide模式，看了文档之后发现这个就是vue版的React context，来了兴趣就试验了一下。
废话完毕，先看看基本使用
Provide-Eject基本使用
查下vue的官方文档就明白了，2句话：
- 父组件配置provide，注入属性
- 子组件配置inject，使用属性
当然vue本身还支持provide-inject之间互传信息的，对于主题来说，内部注入主题已经足够了，所以没有再继续深究这个特性。