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

Vue样式组件

1 个答案: