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.