머리말
-
최근 친자 컴포넌트를 사용할 때 this.$parent를 통해 부모 컴포넌트의 데이터와 메서드에 접근하게 되고 undefined가 발생한다.
-
실제 시나리오는 부모 구성 요소에 여러 하위 구성 요소 양식이 포함된 대화 상자 팝업 상자가 있고 로고에 따라 하나의 하위 구성 요소만 표시되는 것입니다.
-
하위 구성 요소는 상위 구성 요소의 데이터에 ID를 전달해야 합니다. this.$parent(상대적으로 간단함)를 생각하고 this.$emit을 사용하지 않으려 합니다.
-
하지만 this.$parent 인스턴스는 출력되지만, 부모 컴포넌트에 접근하는 데이터와 메서드는 정의되지 않은 것으로 확인됩니다.
솔루션
-
this.$parent 인스턴스를 검색해보니 부모 컴포넌트의 데이터와 메서드가 전혀 없고, 부모 컴포넌트의 인스턴스도 아닌 것을 확인했습니다.
-
대화 상자 팝업 상자의 레이어는 자식 구성 요소 외부에서 래핑되므로 this.$parent는 요소 인스턴스이고 this.$parent.$parent는 부모 구성 요소 인스턴스입니다.
-
하위 구성 요소는 <template></template>에 패키지가 없을 때 this.$parent를 통해 데이터 메서드에 직접 액세스할 수 있습니다.
-
서브컴포넌트가 다이얼로그 팝업으로 Wrap 처리되면 이를 통해 데이터 및 메소드 접근.
코드 예제
// 没有任何包裹是子组件访问父组件
const parent = this.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法
// 子组件被包裹时（比如dialog弹出框包裹时）
const parent = this.$parent.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法요약하다:
이 과정을 거치고 나면 Vue 하위 구성 요소가 this.$parent를 사용하여 상위 구성 요소의 데이터 및 메서드에 액세스할 수 없다는 것을 미리 깊은 인상을 받으셨을 거라 생각합니다. 하지만 실제 개발에서 마주하는 상황은 달라야 하므로 이에 대한 이해가 필요합니다. 원칙이며 항상 동일합니다. 어서 일꾼들을 때려라!
부족한 점이 있으면 지적해 주세요. 감사합니다 -- Fengguowuhen