End goal: To achieve access to the parent component from a child Vue component, regardless of being used within different components. This should be accomplished by solely modifying the child component itself (if possible).
We have a Vue component called PinButton designed to enable "pinning" functionality in other components. It is utilized in multiple components, and we aim to retrieve the parent props so they can be stored and displayed on a separate page showcasing "pinned content." By passing these props back to the parent component.
While it's feasible to manually pass parent props down into the component (
<pin-button :parent-props="$props" />An example involving a single parent and child component demonstrates that you can access parent props using $parent.$props. However, if the child component is nested as slot content within another component inside the parent, the child will inherit the props of the wrapper component - rather than the actual component where it is imported and utilized.
Sandbox demonstration - I intend to retrieve the props for ParentComponent from ChildComponent. The anticipated value is showcased by passing the props along (which I am seeking to avoid), while the current value represents the props of the SlotWrapper component. Even though it does not import ChildComponent, I do not consider it as the true parent, but it serves as the immediate parent element in the <template>
Update: It appears that the suggested solution for accessing components at arbitrary depths involves using provide/inject. However, this approach still necessitates alterations to all components utilizing
<pin-button >