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

Posted 2023-02-23

【中文标题】具有不同背景颜色的相同组件

【英文标题】：same component with different background-color

【发布时间】：2018-12-27 13:45:32

【问题描述】：

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

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

感谢您的帮助！

【参考方案1】：

将颜色也作为道具传递：

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

【讨论】：

哦，这太明显了！感谢您的帮助:)