상위 컴포넌트의 소품 접근 방법 확인 - 포장지가 아닌 수입업체

상위 컴포넌트의 소품 접근 방법 확인 - 포장지가 아닌 수입업체

전체적인 목표: 하위 Vue 컴포넌트에서 컴포넌트를 Import하여 사용하는 컴포넌트에 액세스합니다.이 컴포넌트가 항상 동일한 것은 아닙니다.$parent이 작업은 자 컴포넌트 내에서만 수행해야 합니다(가능한 경우).

우리는 가지고 있다.PinButtonVue 컴포넌트는 다른 컴포넌트에 "pinning" 기능을 추가하기 위한 것입니다.이 컴포넌트는 다른 많은 컴포넌트에서 사용되고 있으며 부모 컴포넌트로 소품을 되돌려 저장 및 "핀 콘텐츠"의 다른 페이지에 렌더링할 수 있도록 부모 컴포넌트에 액세스할 수 있어야 합니다.

주의: 부모 소품을 컴포넌트에 수동으로 전달하면 가능합니다.<pin-button :parent-props="$props" />컴포넌트를 사용할 때마다 이 작업을 수행할 필요가 없습니다.

부모 컴포넌트와 자녀 컴포넌트를 1개만 사용하여 이 컴포넌트를 최소한으로 재현하면 다음 방법으로 부모 소품에 액세스할 수 있음을 알 수 있습니다.$parent.$props단, 자 컴포넌트가 부모 내의 다른 컴포넌트의 슬롯 콘텐츠로 네스트 되어 있는 경우 자 컴포넌트는 래퍼 컴포넌트의 프로포넌트를 취득합니다.이 컴포넌트를 Import하여 실제로 사용하는 컴포넌트가 아닙니다.

샌드박스 리플리케이션 - 소품을 구입하고 싶습니다.ParentComponent내부에서ChildComponent기대치는 소품(피하려는 것)을 건네주는 것으로 나타나며, 실제 가치는 소품목.목.목.목.목.목.목.목.목.목.목.목.목.소품.SlotWrapper컴포넌트, Import하지 않음ChildComponent진정한 부모라고는 생각지 않지만, 이 부모라는 것은 우리 사회의<template>

업데이트: "임의적으로 심층" 접근에 대해 권장되는 솔루션은 제공/주입하는 것으로 보이지만, 이 경우 여전히 다음을 사용하는 모든 컴포넌트를 변경해야 할 것으로 보입니다.<pin-button />

질문에 직접 답변하려면 구성 요소가 렌더링되는 "콘텍스트"를 통해 ChildComponent에서 ParentComponent에 액세스할 수 있습니다.

// ChildComponent.vue
computed: {
  expectedProps() {
    return this.$vnode.context.$props
  }
}

하지만 이것은 "XY"와 같은 문제일 수 있습니다. 여러분이 달성하고자 하는 것을 위한 더 나은 설계 솔루션이 있을 것입니다.

언급URL : https://stackoverflow.com/questions/70613038/vue-how-to-access-props-of-parent-component-the-importer-not-a-wrapper