注入CSS到Vue組件？

Question

見下面my-component.vue。這個組件需要是可編程的。

它需要得到extrenal css表，因爲我需要讓其他開發人員來定製它的內在外觀。

除accept a javascript object之外是否還有其他方法？

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

這樣，用戶可以定義他想要的任何風格，以及他希望的任何類名。他只需要使用適當的屬性名稱。 作用域樣式沒有副作用。