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>

这甚至可能吗？我目前认为做到这一点的唯一方法是为每个尺寸变化都拥有一个道具，然后有条件地将其设置为true或false。但这似乎太过分了。任何人有任何想法吗？

仅供参考-我正在使用Vuetify，如果有什么不同

Answer 1

使您的library( tidyverse ) group <- function(.data, ...) { dots <- enexprs(...) %>% map(rlang::expr_text) nms <- str_c( "group_", names(dots) ) elems <- dots %>% str_split("[+]") %>% map(str_trim) %>% map( ~expr(vars %in% !!.x) ) %>% set_names(nms) .data %>% mutate( !!!elems ) } df %>% group(odd = one + three, even = two + four, prime = one + two + three) # vars group_odd group_even group_prime # 1 one TRUE FALSE TRUE # 2 two FALSE TRUE TRUE # 3 three TRUE FALSE TRUE # 4 four FALSE TRUE FALSE df %>% group( abc = two + three + four ) %>% group( abc = two ) # vars group_abc # 1 one FALSE # 2 two TRUE # 3 three FALSE # 4 four FALSE对象像这样：

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"
  }
}

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

1 个答案: