Vue和重复的道具

Question

我有一系列代表不同表单字段类型的组件。这些设计不会对父母有任何依赖性，因此所有各种​​属性都会作为单独的道具传递。

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

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

但是，这意味着将父组件中的所有道具映射到每个子组件。目前我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.