javascript - 如何在vue js中从父级修改子组件的颜色属性

Question

我有一个子Card组件：

<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给子组件。父组件的一部分代码如下所示。

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

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

如您所见，我尝试使用道具将color父级传递给子级，但是即使我能够将数据传递给子级，{{color}}打印出来#FFC400 我不确定如何将颜色值分配给v-card的颜色属性。我怎样才能做到这一点？谢谢你。

标签： javascriptvue.jsvue-componentvuetify.jsvue-props

Answer 1

唯一缺少的是将 prop 绑定到 的color属性<v-card>，否则它只接收字符串“color”，而不是该名称的变量。

您可以使用v-bind:color="color"或 速记:color="color"

<v-card
  class="mx-auto"
  max-width="500"
  :color="color"
  outlined
  dark
>