Javascript 如何修改子组件'；vue js中父级的s颜色属性

我有一张儿童

卡

组件：

<template>
  <v-card
    class="mx-auto"
    max-width="500"
    color=color
    outlined
    dark
  >
    <v-list-item three-line>
      <v-list-item-content>
        <div class="overline mb-4">
          OVERLINE
          {{color}}
        </div>
        <v-list-item-title class="headline mb-1">
          Headline 5
        </v-list-item-title>
        <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-avatar
        tile
        size="80"
        color="grey"
      ></v-list-item-avatar>
    </v-list-item>

    <v-card-actions>
      <v-btn
        outlined
        rounded
        text
      >
        Button
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
  export default {
    name: 'Card',
    props: {
      color: String
    }
  }
</script>

---

正如您所见，我试图使用道具将

颜色

从父对象传递给子对象，但是，即使我能够将数据传递给子对象，

{color}

打印出

#FFC400

我不确定如何将颜色值分配给

v-card

的颜色属性。我怎样才能做到这一点？谢谢。

唯一缺少的是将道具也绑定到

属性的

颜色，否则它只接收字符串“color”，而不是该名称的变量

您可以使用
v-bind:color=“color”
或速记
：color=“color”



<template>
  <Card v-bind:color="color"/>
</template>

<script>
  export default {
   data() {
      return {
        color: "#FFC400"
      }
    },
  }
</script>