javascript - vue에서 구성 요소 분할 및 조합 사용 문제

Question

저는 Vue를 처음 사용하는 사람입니다. 현재 그리드 구성 요소와 대화 상자 구성 요소를 사용하여 작은 연습을 하고 있습니다. 그리드의 각 행마다 삭제 버튼이 있습니다. 클릭하면 삭제 여부를 묻는 팝업 창이 나타납니다. 그리드 구성 요소는 아래와 같습니다.

아래 대화 구성 요소 그림:

App.vue에서 vue 인스턴스를 생성하고 그리드 구성 요소를 도입합니다. 이제 대화 상자를 App.vue에 도입해야 할지 아니면 그리드에 도입해야 할지 모르겠습니다. 그리드에 도입하면 그리드가 대화와 너무 깊게 결합되지 않을까요? 앱에 대화 상자가 도입되면 대화 상자를 표시할지 여부를 제어하는 ​​것은 앱에서 제어해야 하지만 대화 상자를 닫는 것은 대화 상자에서 제어해야 한다고 생각합니다.
현재 접근 방식은 App.vue에 각각 Gird와 대화 상자를 도입하는 것입니다. 삭제 버튼을 클릭하면 Gird에서 이벤트가 발생하고 해당 이벤트가 앱에서 모니터링되며 대화 상자 표시 여부를 제어하는 ​​값이 다음과 같이 변경됩니다. 진실. 대화 상자 닫기 버튼을 클릭하면 이벤트가 발생합니다. 앱은 이벤트를 수신하고 대화 상자 표시 여부를 제어하는 ​​값을 false로 변경합니다. 이런 식으로 처리하면 안 될 것 같아요.
부품을 잘 나누고 결합하는 방법에 대해 선배님들의 조언 부탁드립니다. 감사합니다!

Answer 1

v-model을 사용하여 대화 상자를 입력으로 '위장'하여 부모-자식 양방향 데이터 흐름을 달성합니다

하위 구성요소:

으아악

아버지:

으아악

이런 식으로 부모가 showDialog를 변경하면 숨기거나 표시할 수 있으며, 자식 구성 요소에서 close를 호출하면 showDialog의 값도 업데이트됩니다

공식 문서 https://cn.vuejs.org/v2/guide... 사용자 정의 이벤트를 사용한 양식 입력 구성 요소