Vue cómo acceder a las propiedades del componente padre – el importador, no un envoltorio.

Objetivo general: desde un componente hijo de Vue, acceder al componente con el que se importa y utiliza, que no siempre es el mismo que $parent. Esto debería hacerse solo realizando cambios dentro del componente hijo (si es posible).

Tenemos un componente Vue llamado PinButton destinado a agregar una funcionalidad de “anclaje” a otros componentes. Este componente se utiliza en muchos otros componentes y queremos poder acceder a las props del componente padre para guardarlas y mostrarlas en una página diferente de “contenido anclado”, pasando esas props de vuelta al componente padre.

Nota: Sé que esto sería posible pasando manualmente las props del padre al componente (<pin-button :parent-props="$props" />), pero estamos tratando de evitar tener que hacer esto cada vez que se utiliza el componente.

Una reproducción mínima de esto con un solo componente padre e hijo mostrará que se pueden acceder a las props del padre usando $parent.$props. Sin embargo, cuando el componente hijo está anidado como contenido de slot de algún otro componente dentro del padre, entonces el hijo obtendrá las props del componente envoltorio, no del componente en el que se importa y se utiliza realmente.

Reproducción en CodeSandbox – Quiero obtener las props de ParentComponent desde ChildComponent. El valor esperado se muestra pasando las props (lo que estoy tratando de evitar) y el valor real son las props del componente SlotWrapper, que no importa ChildComponent, por lo que no lo consideraría como el verdadero padre, pero es el elemento padre directo en el <template>.

Actualización:
Parece que la solución sugerida para el acceso “arbitrariamente profundo” es provide/inject, pero esto aún requeriría cambiar todos los componentes que usan <pin-button />.