具有不同背景颜色的相同组件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了具有不同背景颜色的相同组件相关的知识,希望对你有一定的参考价值。
我创建了一个组件,并在我的一个vue页面上多次使用它。现在我想改变每个组件使用的背景颜色。
这是我的组成部分:
<template>
<div class="project-card" :style="{backgroundColor: color}">
<h2>{{ title }}</h2>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
name: 'ProjectCard',
props: {
title: String,
description: String
},
data: function() {
return {
color: "#000"
}
}
}
</script>
这是我的vue页面,我使用该组件:
<template>
<div class="projects">
<ProjectCard
title="Projekt 01"
description="Lorem Ipsum"
/>
<ProjectCard
title="Projekt 02"
description="Lorem Ipsum"
/>
</template>
<script>
import ProjectCard from '@/components/ProjectCard.vue'
export default {
name: 'projects',
components: {
ProjectCard
}
}
</script>
现在是否可以在项目页面上更改项目卡组件的颜色数据,就像我更改了文本道具一样?
谢谢你的帮助!
答案
传递颜色也作为道具:
<ProjectCard
title="Projekt 02"
description="Lorem Ipsum"
color= "#000F"
/>
<ProjectCard
title="Projekt 02"
description="Lorem Ipsum"
color= "#00FF00"
/>
并在脚本中:
<script>
export default {
name: 'ProjectCard',
props: {
title: String,
description: String,
color:String
},
data: function() {
return {
color: "#000"
}
}
}
</script>
以上是关于具有不同背景颜色的相同组件的主要内容,如果未能解决你的问题,请参考以下文章
使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由
我可以使用相同的“radioButton_states”drawable并创建一个每个按钮具有不同背景颜色的radioGroup吗?