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>

然后在道具中：“color:red”

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