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

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>

以上是关于具有不同背景颜色的相同组件的主要内容,如果未能解决你的问题,请参考以下文章

java窗口的背景颜色

使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由

我可以使用相同的“radioButton_states”drawable并创建一个每个按钮具有不同背景颜色的radioGroup吗?

加载具有不同背景颜色的 Git Bash

iOS:背景颜色——UITableView 和附件具有相同的背景颜色

如果在同一位置有两个具有两种不同颜色的顶点,片段会得到啥颜色?