상위 구성 요소를 클릭하여 하위 구성 요소를로드합니까?

Question

코멘트를로드하는 버튼 구성 요소가 있습니다. 주석은 별도의 구성 요소입니다.

하위 구성 요소를로드하려면 어떻게해야합니까? 하위 구성 요소에서 v-if를 사용하는 간단한 경우입니까? 아니면 더 효율적인 방법이 있습니까?

<template> 
    <div class="comment-btn" @click="toggleActive"> 
     <img src="/img/comment-btn.svg"> 
    </div> 

    <comments v-if="active"></comments> 
</template> 

편집 :

내가 마운트에 대해 읽기, 그게 더 좋을 것거야?

Answer 1

v-if 및 v-show은 모두 허용되는 옵션입니다. 그러나 스스로 질문해야 할 질문은 "토글 된 상태에서 어떤 작업을 수행하기 위해 하위 구성 요소가 필요합니까?"입니다. 및 "하위 구성 요소의 데이터를 유지해야합니까?" 정확한 프로그램 요구 사항에 따라 적절하게 선택해야합니다. 당신이 전환에 일이 아무것도 필요하지 않습니다하지만 당신은 데이터 v-show를 사용, 지속해야하는 경우
1) :

다음은 답을 기반으로해야합니다 솔루션에 대한 일반적인 설명이다.
2) 토글 링이 발생할 필요가없고 데이터를 지우려는 경우 v-if을 사용하십시오.
3) 토글 링이 발생할 필요가 있고 데이터가 지속되기를 원하면 v-if 및 mounted 라이프 사이클 후크를 사용하여 이벤트를 트리거하고 부모 데이터에 $emit 데이터를 저장하면 나중에 복원 할 수 있습니다. 또는 v-show 및 watch, 특히 props 값을 사용하십시오.
4) 토글 링이 발생할 필요가 있고 데이터가 지속될 필요가없는 경우 이벤트를 트리거하기 위해 v-if 및 mounted주기 훅을 사용하면됩니다.