Vue 및 반복 소품

Question

다른 양식 필드 유형을 나타내는 일련의 구성 요소가 있습니다. 이것들은 부모에게 어떤 의존성도 가지지 않도록 고안 되었기 때문에 모든 다양한 속성들이 개별 소품으로 전달됩니다.

현재 구현 된 특정 논리를 처리 할 래퍼 구성 요소를이 필드에 쓰려고합니다.

아이디어는 추가 논리를 처리하고 type 소품을 기반으로 필요한 구성 요소를 출력하는 mws-field이라는 구성 요소를 갖게한다는 아이디어입니다.

그러나 이것은 부모 구성 요소의 모든 소품을 모든 하위 구성 요소에 매핑하는 것을 의미합니다. 현재 내 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.