Vue的UI注入

overview

Vue component的形式一般是使用single file component，即后缀为.vue的文件，在.vue中的style可以选择是否scoped，scoped表示的是是否开启Component-scoped CSS

When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only.

即如果开启了scoped，那么css样式只会运用到当前组件中的元素

实现的方式如下，不需要polyfills，只需要通过PostCss来转换即可

<style scoped>
.example {
  color: red;
}
</style>
<template>
  <div class="example">hi</div>
</template>

最终会转换成

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

practical

在实际使用中我遇到这样的问题，有一个图片上传的组件，功能一致，但是UI略有不同，我不希望在组件中使用props都定义好，那样太过耦合，也不具有扩展性，我希望有一个默认样式，然后在具体使用的时候使用css来定制样式，简单来说就是在使用的时候UI注入

我认为比较好的实践是，在使用组件的地方，使用两个style标签，一个为scoped，即当前组件的样式，另一个为全局样式，虽然时候全局样式，但是在使用的组件身上使用id，之所以这样是因为，组件的具体使用场景一般是特定的，虽然是global style, 但是使用id又不至于影响到其他元素

<style>
/* global styles */
#idSelector {
  // ...
}
</style>
<style scoped>
/* local styles */
</style>