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

Question

저는 Vue를 처음 접했고 첫 번째 프로젝트를 진행하고 있습니다. 여러 하위 및 손자 구성 요소가 포함된 양식을 만들려고 합니다. 양식의 여러 복사본을 생성할 수 있어야 하는 문제에 직면했습니다. 따라서 일부 데이터 속성을 한 수준 위로 옮겼습니다. 현재 양식은 ApplicationPage.Vue>TheApplication.Vue>PersonalInformation.Vue>BaseInput.Vue입니다. 내 문제는 TheApplicat을 통과해야 한다는 것입니다.

P粉037880905 · Answer

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

아이들

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

Child.vue

으아아아

또는 사용 방법:

으아아아 으아아아

부모님

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

Parent.vue

으아아아 으아아아

을 사용하는 경우 으아아아

조부모님

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

GrandParent.vue

으아아아

P粉842215006 · Answer

저는 이렇게 합니다: codesandbox

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

손자

으아아아 으아아아

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

아이들

으아아아 으아아아

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

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