동일한 애플리케이션에서 두 개의 동일한 구성요소를 사용할 수 있습니까?

Question

어떤 경우에는 팝업 창이나 비팝업 창을 호출하려는 경우

<템플릿>
<!-- 팝업창 -->
<v-dialog v-model="popupFlag">
    <A :prop-option="옵션">
</v-대화상자>


<!-- 주요 내용 -->
<div v-if="!popupFlag">
    <B :prop-option="옵션">
</div>
</템플릿>

"C.vue"에서 A 가져오기
"C.vue"에서 B 가져오기

기본값 내보내기 {

    소품: {
        팝업 플래그: {
            유형: 부울,
            필수: 사실,
            기본값: 거짓,
        }
    },
    데이터() {
        반품: {
            옵션: '어쩌구'
        }
    }
    
}

코드를 아래와 같이 구성했는데, 이게 맞는 코드인가요? 동일한 구성요소를 사용할 수 있나요? (C.vue)

Answer 1

예, 물론 상위 구성 요소에서 동일한 구성 요소를 여러 번 사용할 수 있습니다. 템플릿에 삽입할 때마다 해당 구성 요소의 새 인스턴스가 생성됩니다. 따라서 귀하의 경우 코드를 다음과 같이 단순화할 수 있습니다.

으아악

또는 더 쉬운 방법은 다음과 같습니다.

으아악

이렇게 하면 popupFlag에 따라 다른 옵션으로 동일한 구성 요소를 효율적으로 재사용할 수 있습니다.