Question

我有一系列代表不同表单字段类型的组件。这些设计不依赖于他们的父母，所以他们的各种属性都作为单独的道具传递。

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

我的想法是，我将有一个名为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一个对象指定要传递的道具：

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

Vue和重复的道具

1 个答案: