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.