Objetivo general: desde un componente secundario de Vue, obtenga acceso al componente en el que se importa y se usa , que no siempre es lo mismo que $parent . Esto debe hacerse solo haciendo cambios dentro del componente secundario (si es posible).

Tenemos el componente PinButton Vue destinado a agregar una funcionalidad de "fijación" a otros componentes. Este componente se usa dentro de muchos otros componentes y queremos poder acceder a los accesorios principales para que puedan guardarse y renderizarse en una página diferente de "contenido anclado" pasando esos accesorios nuevamente al componente principal.

Nota: sé que esto sería posible al pasar manualmente los accesorios principales al componente ( <pin-button :parent-props="$props" /> ), pero estamos tratando de evitar tener que hacer esto cada vez que el se utiliza el componente.

Una reproducción mínima de esto con un solo componente principal y secundario mostrará que puede acceder a los accesorios principales usando $parent.$props . Sin embargo, cuando el componente secundario está anidado como contenido de ranura de algún otro componente dentro del principal, el componente secundario obtendrá los accesorios del componente contenedor, no el componente en el que se importa y se usa realmente.

Reproducción de sandbox: quiero obtener los accesorios para ParentComponent desde ChildComponent . El valor esperado se muestra al pasar los accesorios (lo que estoy tratando de evitar) y el valor real son los accesorios del componente SlotWrapper , que no importa ChildComponent , por lo que no lo consideraría el verdadero padre, pero es el elemento principal directo en la <template>

Actualización: parece que la solución sugerida para el acceso "arbitrariamente profundo" es proporcionar/inyectar , pero esto aún parecería requerir cambiar todos los componentes que usan el <pin-button />