将css注入Vue组件？

Question

见下文my-component.vue.这个组件需要是可用的.

它需要获得extrenal css表,因为我需要允许其他开发人员自定义其内部外观.

除了接受javascript对象之外还有其他方法吗？

<template>
  <div class="container">
    <div class="A"></div>
    <div class="B"></div>
    <div class="C"></div>
  </div>
</template>

<style scoped>
  .A {
    background-color:green;
  }
  .B {
    background-color: red;
  }
  .C {
    background-color: yellow
  }
</style>

Answer 1

在你的组件内部：

<template>
  <div :class="boxStyle"></div>
</template>

<script>
  export default {
    props: {
      boxStyle: {
        type: String,
        default: 'box-default'
      }
    }
  }
</script>

<style lang="scss" scoped>
.box-default {
  width: 100px;
  height: 100px;
  background: black;
}
</style>

用户可以这样使用它：

<template>
  <div id="app">
    <my :boxStyle="'mySpecialBox'"></my>
  </div>
</template>


<script>

import myCompoentns from './components/myComponent.vue'

export default {
  name: 'app',
  components: {
    'my': myCompoentns
  },
}
</script>

<style lang="scss">
  .mySpecialBox {
    width: 250px;
    height: 250px;
    background: red;
  }
</style>

这样，用户可以定义他想要的任何样式，任何他想要的类名。他只需要使用适当的属性名称即可。作用域样式没有副作用。