vue -将道具从对象传递到组件。

Question

我需要将一些道具传递给组件，我将道具放在一个对象中，我想这样做：

<v-btn 
  btn.size.sm 
  btn.size.md 
  btn.size.lg
>
{{ btn.text }}
</v-btn>

其中，我的btn对象如下所示：

btn = {
  text:"Click me",
  size:{
    sm:"sm-12",
    md:"md-6",
    lg:"lg-4"
  }
}

由此产生的组件将相当于编写：

<v-btn 
  sm-12
  md-6
  lg-4
>
{{ btn.text }}
</v-btn>

这有可能吗？我认为目前唯一能做到这一点的方法是为每个尺寸的变化提供一个支柱，然后有条件地将其设置为真或假。但这似乎太过分了。有人有什么想法吗？

FYI -如果这有什么区别的话，我用的是Vuetify

Answer 1

使btn对象如下所示：

btn = {
  text:"Click me",
  size:{
    "sm12": true,
    "md6": true,
    "lg4": true
  }
}

然后可以使用v-bind语法创建属性：

<v-btn v-bind="btn.size">
  {{ btn.text }}
</v-btn>

或者如果您不能更改btn对象：

btn = {
  text:"Click me",
  size:{
    sm:"sm12",
    md:"md6",
    lg:"lg4"
  }
}

注意，您也可以将它们绑定为类：

<v-btn v-bind:class="Object.values(btn.size)">
  {{ btn.text }}
</v-btn>