[英]Vue styling components
I have a basic vue component.我有一个基本的 vue 组件。 It looks like this:
它看起来像这样:
<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>
What I struggle to achieve is, when I load the component in the parent that looks something like this:我努力实现的是,当我在父组件中加载看起来像这样的组件时:
<imageItem :source="source" />
I want to be able to customize the component styles.我希望能够自定义组件样式。 For example something like this:
例如这样的事情:
<imageItem :source="source" :textColor="red" />
I'm guessing I should do it with props also but its not working as expected.我猜我也应该用道具来做,但它没有按预期工作。
Can someone share a proper way to do this ?有人可以分享一个正确的方法来做到这一点吗?
Try this:尝试这个:
<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>
And then in the prop: "color:red"然后在道具中:“颜色:红色”
<imageItem :source="source" :style="color : red" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.