한 페이지에 여러 개의 동일한 VueJS 구성 요소를 사용하는 적절한 방법은 무엇입니까?

VueJS 구성 요소로 사용자 지정 입력을 만들려고합니다. 필드와 버튼은 <input type="text">입니다. 이 구성 요소는 이러한 동작을 구현해야합니다. 자동 완성 기능을 사용하여 텍스트를 입력하거나 데이터베이스의 레코드와 모달 대화 상자를 여는 버튼을 누른 다음 하나를 선택합니다. 다음과 같은 내용 :한 페이지에 여러 개의 동일한 VueJS 구성 요소를 사용하는 적절한 방법은 무엇입니까?

<div class="input-group"> 
    <input type="text" class="form-control" placeholder="Search for..."> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button" @click="openModal">Choose</button> 
    </span> 
</div>

모달 대화 상자에는 복잡한 논리와 많은 HTML 코드가 포함됩니다. 다른 구성 요소에 모달 대화 상자를 넣을 것입니다.

내 모든 사용자 정의 입력 구성 요소가 같은 테이블 행에서 페이지에 사용됩니다 후

: 10 ~ 30 개 행을 포함 할 수

<tr v-for="item in items"> 
    <td><input-component :item="item"><input-component></td> 
</tr>

표하고 질문입니다 - 내가에서 무거운 모달 대화 코드를 제외해야 내 사용자 정의 입력 구성 요소 또는 VueJS에서 DOM에 수십 개의 복제본을 포함해도 괜찮습니까?

내가 선택해야 어떤 변형 :

1) 모달 대화 상자를 제외 페이지의 상단에 한 번 배치하고

<body> 
    <modal-component></modal-component> 
    <table><tbody> 
     <tr v-for="item in items"> 
      <td><input-component :item="item"><input-component></td> 
     </tr> 
    </tbody></table> 
</body>

2) 모달 대화 상자를 포함하는 사용자 정의 입력 구성 요소에서 호출하고 수십를 가지고 DOM의 중복 된 코드

<body> 
    <table><tbody> 
     <tr v-for="item in items"> 
      <td><input-component :item="item"><input-component></td><!--now contains <modal-component></modal-component>--> 
     </tr> 
    </tbody></table> 
</body>

출처

2017-01-20 brunen9

사용하십시오 dynamic component 모습과 반응성 속성에 구성 요소 유형을 바인딩 배열에서 관련 데이터 대화 상자에서

채우기.

당신은 당신이 자신의 상태를 유지하거나 다시 렌더링을 피할 수 있도록 메모리에 스위치 - 아웃 대화 상자를 유지하려면

Vue.component('customer-dialog', { 
 
\t template: '<p>Customer Dialog</p>' 
 
}) 
 

 
Vue.component('supplier-dialog', { 
 
\t template: '<p>Supplier Dialog</p>' 
 
}) 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    dialog: null // initial dialog to use 
 
    }, 
 
    methods: { 
 
    \t showDialog: function(d) { 
 
    \t this.dialog = d 
 
     // additional dialog initialization code 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
 
<div id="app"> 
 
    <component :is="dialog"></component> 
 
    <button @click="showDialog('customer-dialog')">Customers</button> 
 
    <button @click="showDialog('supplier-dialog')">Suppliers</button> 
 
</div>

, 당신은 요소에 동적 요소를 포장 할 수 있습니다.

<keep-alive><component :is="dialog"></component></keep-alive>

출처

2017-01-20 18:42:58 djones

두 가지 변종 중 동적 구성 요소를 사용하는 것이 좋습니다. 아니면 내 사건의 다른 세 번째 구현을 의미 했습니까? – brunen9

나는 잠시 동안 당신의 제안을 생각했으며, 내게는 모달 구성 요소가있는 여러 구성 요소를 구현하는 가장 적절한 방법이라고 생각합니다. – brunen9

전체 페이지에 대해 하나의 모달 대화 상자 만 사용하십시오. 이

var dialogs = [ 
    { name: 'john', surname: 'snow' }, 
    { name: undefined, surname: undefined }, 
    ... 
] 

var currentDialog = 4 
var dialogData = dialogs[currentDialog]

출처

2017-01-20 16:54:06 gurghet

이 구성 요소의 작업이이 코드에 완전히 의존 할 때 일부 코드를 푸는 것이 바람직하지 않다고 생각하지 않습니까? 나는 다음과 같은 것들을 알고있다 : 나의 커스텀 인풋 컴포넌트와 다른 인적 요소들을 가지고 페이지에 모달을 포함하는 것을 잊어 버린다. – brunen9

두 개를 포함하는 래퍼 구성 요소 만 생성하기 – gurghet

하나의 모달 및 여러 개의 사용자 정의 입력 구성 요소로 변형 된 래퍼 구성 요소를 적용하는 방법을 알지 못합니다. – brunen9

한 페이지에 여러 개의 동일한 VueJS 구성 요소를 사용하는 적절한 방법은 무엇입니까?

답변

관련 문제