Vue 樣式組件

Question

我有一個基本的 vue 組件。 它看起來像這樣：

 <script> export default { props: { source: { type: String, required: true, } }, } </script>

 <template> <div class="imageItem"> <img class="image" :data-srcset="source" /> <p> this is some text </p> </div> </template>

我努力實現的是，當我在父組件中加載看起來像這樣的組件時：

<imageItem :source="source" />

我希望能夠自定義組件樣式。 例如這樣的事情：

<imageItem :source="source" :textColor="red" />

我猜我也應該用道具來做，但它沒有按預期工作。

有人可以分享一個正確的方法來做到這一點嗎？

Answer 1

嘗試這個：

 <script>
export default {
    props: {
        source: {
            type: String,
            required: true,
        },
        style:{
            type: String,
            required:true
        }            
    },
}
</script>

<template>
  <div class="imageItem">
    <img class="image" :data-srcset="source" :style="style" />
    <p> this is some text </p>
 </div>
</template>

然后在道具中：“顏色：紅色”

<imageItem :source="source" :style="color : red" />