Как импортировать vue компонент со своими параметрами?

Question

[HamSter]

Есть небольшой проект с components/progressBar (или card).

codesandbox.io

<template>
  <div class="hello">
    <b-card :bg-variant="color" text-variant="white" header="Primary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: ['color'],
  data() {
    return {
    };
  },
};
</script>

С :bg-variant="color"

Импортирую данный компонент в App:

<Card :variant="color"/>

Но нет эффекта.

Вопрос: как импортировать компонент со своими параметрами, в данном случае с фоном? Чтобы можно было вставить несколько карточек с разными цветами?

Answer 1

[Сергей delphinpro]

props: ['color'], !!!

<Card :color="color"/>
<Card color="#f00"/>