Vue 和重复的道具

Posted 2023-02-23

【中文标题】Vue 和重复的道具

【英文标题】：Vue and repeated props

【发布时间】：2018-03-25 15:45:58

【问题描述】：

我有一系列代表不同表单字段类型的组件。这些被设计为不依赖于它们的父级，因此它们的所有各种属性都作为单独的 props 传入。

我正在尝试为这些字段编写一个包装器组件，该组件将处理一些特定于我当前实现的逻辑。

我的想法是我将拥有一个名为 mws-field 的组件，它将处理额外的逻辑，然后根据其 type 属性输出所需的组件。

但是，这意味着将父组件中的所有道具映射到每个子组件。目前我的mws-field 模板如下所示：

<template>
    <form-field-select v-if="field && type == 'select'" 
        :label="label" 
        :classes="classes" 
        :placeholder="placeholder" 
        :tooltip="tooltip" 
        :domName="field.domName" 
        :required="field.required" 
        :value="field.value"
        :disabled="field.vm.disabled"
        :review="field.vm.review"
        :errors="field.errors"
        :options="options"
    ></form-field-select>

    <form-field-text v-else-if="field && type == 'text'" 
        :label="label" 
        :classes="classes" 
        :placeholder="placeholder" 
        :tooltip="tooltip" 
        :domName="field.domName" 
        :required="field.required" 
        :value="field.value"
        :disabled="field.vm.disabled"
        :review="field.vm.review"
        :errors="field.errors"
    ></form-field-text>

    ... etc

</template>

我有十几个这样的组件，在大多数情况下，它们共享同一组道具。

我认为答案在 render() 方法中，但据我了解，这需要 functional 标志，组件不支持该标志。

有没有一种更简洁、更简洁、更易于管理的方法？

【问题讨论】：

将所有这些都传递到一个对象中怎么样？您可以简单地将所有这些道具放入一个对象中，然后将它们传递给您的组件。

另外，截至 11 小时前，newest version of Vue 在 input 元素上支持动态 type。 jsfiddle.net/w2x5em9z

@thanksd，很高兴知道，干杯！

【参考方案1】：

你可以给v-bind一个对象来指定你要传递的props：

<template>
  <form-field-select v-if="field && type == 'select'" v-bind="inputProps"/>
  <form-field-text v-else-if="field && type == 'text'" v-bind="inputProps"/>
</template>

data() 
  return 
    inputProps: 
      label: this.label,
      classes: this.classes,
      placeholder: this.placeholder,
      tooltip: this.tooltip,
      domName: this.field.domName,
      required: this.field.required,
      value: this.field.value,
      disabled: this.field.vm.disabled,
      review: this.field.vm.review,
      errors: this.field.errors,
      options: this.options,
    
  

Here's the documentation on v-bind.

【讨论】：

美女！没有意识到我可以通过 v-bind 这样的对象，但这正是我所追求的。非常感谢。