Vue 和重复的道具

Question

我有一系列代表不同表单字段类型的组件。这些被设计为不依赖于它们的父级，因此它们的所有各种属性都作为单独的 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 标志，组件不支持该标志。

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

Answer 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.