Question

见下面的my-component.vue。这个组件需要是可以的。

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

<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

在您的组件内：

＆＃13;

<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>

＆＃13;

用户可以这样使用它：

＆＃13;

<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>

＆＃13;

这样，用户可以将他想要的任何风格定义为他希望的任何类名。他只需要使用适当的属性名称。范围造型没有副作用。

Answer 2

您可以使用“深层”选择器覆盖“范围内”组件样式中的任何样式。

<style scoped>
.a >>> .b { /* ... */ }
</style>

详细信息：vue-loader/deep-selector

将css注入Vue组件？

2 个答案: