Css 具有不同背景颜色的相同组件

我已经创建了一个组件，并在我的一个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>

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

{{title}}
{{description}}

导出默认值{
名称：'项目卡'，
道具：{
标题：字符串，
描述：字符串
},
数据：函数（）{
返回{
颜色：“000”
}
}
}

这是我的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>

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

从“@/components/ProjectCard.vue”导入ProjectCard
导出默认值{
名称：'项目'，
组成部分：{
项目卡
}
}

现在是否可以在我的项目页面上更改项目卡组件的颜色数据，就像我更改文本道具一样

---

谢谢你的帮助

将颜色也作为道具传递：

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

导出默认值{
名称：'项目卡'，
道具：{
标题：字符串，
描述：字符串，
颜色：字符串
},
数据：函数（）{
返回{
颜色：“000”
}
}
}

将颜色也作为道具传递：

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

导出默认值{
名称：'项目卡'，
道具：{
标题：字符串，
描述：字符串，
颜色：字符串
},
数据：函数（）{
返回{
颜色：“000”
}
}
}

哦，这太明显了！谢谢你的帮助：）哦，这太明显了！谢谢你的帮助：）