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