VueJs 3의 조부모 구성 요소는 조부모 구성 요소에 이벤트를 보냅니다.

Question

저는 Vue를 처음 접했고 첫 프로젝트를 진행하고 있습니다. 여러 하위 및 손자 구성 요소가 포함된 양식을 만들려고 합니다. 양식의 여러 복사본을 생성할 수 있어야 하는 문제에 직면했습니다. 따라서 일부 데이터 속성을 한 수준 위로 옮겼습니다. 현재 양식은 ApplicationPage.Vue > TheApplication.Vue > PersonalInformation.Vue > 내 문제는 TheApplication을 통해 PersonalInformation에서 ApplicationPage로 변경 사항을 내보내야 한다는 것입니다. 이 상황을 어떻게 처리해야 할지 파악하는 데 어려움을 겪고 있습니다. Vue2에 대한 솔루션을 찾고 있었지만 Vue3에 대한 솔루션을 찾지 못했습니다.

ApplicationPage.vue

으아아아

TheApplication.Vue

으아아아 으아아아

개인정보.vue

으아아아 으아아아

Answer 1

발생된 이벤트를 연결하고 싶지 않은 사람을 위해 이벤트를 발생시키는 데 사용할 수도 있는 하위 개체에 상위 개체가 있습니다. 콘솔에 경고가 표시되지 않도록 하려면 상위 항목에 실행을 등록해야 합니다.

아이들

직계 부모의 $emit에게 여기로 전화하세요.

Child.vue

으아아아

또는 사용 방법:

으아아아 으아아아

부모님

조상에게 신호를 보내는 것은 부모이므로 여기에 방출을 선언합니다. ，只需使用 defineEmits() 배출 선언 방법. 문서를 참조하세요.

Parent.vue

으아아아 으아아아

을 사용하는 경우 으아아아

조부모님

그런 다음 조부모 구성 요소에서 이벤트를 수신합니다.

GrandParent.vue

으아아아

Answer 2

저는 이렇게 합니다: codesandbox

Emits는 내보낼 이름과 내보낼 값이라는 두 가지 매개변수만 허용합니다. 여러 값을 내보내는 경우 단일 개체로 내보내야 합니다. 내 솔루션에서 Sun 구성 요소는 필드 이름과 값을 단일 개체로 내보냅니다.

손자

으아아아 으아아아

하위 객체는 캡처하고 다시 사용합니다. 하지만 먼저 상위 구성 요소가 예상하는 형식으로 방출하도록 주의합니다(v 모델에 설정되어 있기 때문에 전체 data.primary 객체를 사용합니다)

아이들

으아아아 으아아아

그러면 상위 구성 요소는 v-model data.primary 개체를 자동으로 수신하고 업데이트합니다.

또는 , Vue의 공식 상태 관리 라이브러리인 Pinia를 항상 사용할 수 있다는 점을 언급해야 합니다(한 구성 요소에 일부 상태를 저장하고 다른 구성 요소에서 동일한 상태를 읽을 수 있음). 확실히 학습 곡선이 있지만 확실히 배울 가치가 있으며 이러한 유형의 상황을 단순화하도록 설계되었습니다.