Estoy tratando de crear un complemento de diálogo en vue3 usando la API de composición.

Estoy en el paso donde quiero extender un componente base.

Esto es lo que tengo:

He creado un ejemplo en vivo aquí

 // dialogInstaller.js // component passed by user or some default components import userComponent from "./userComponent.vue"; // helper mount function source: https://github.com/pearofducks/mount-vue-component import { mount } from "@/mount"; // dialog related functions that must be accesible from the component above after extending const dialogClose = ref(() => console.log("dialog closed")); // just an example // extend the component const dialogPop = { extends: userComponent, setup() { return { dialogClose, ...userComponent.setup(), }; }, }; // now mount the component const { vNode, destroyVNode, el } = mount(dialogPop, { props: {}, app: appInstance, // vue app instance element: dialogWrapper, // component mount location });

El componente de usuario se ve así:

 <template> <div> <button type="button" @click="dialogClose">Close from template</button> <button type="button" @click="dialogCloseFromSetup">Close from setup</button> <button type="button" @click="dialogCloseFromInstance">Close from instance</button> </div> </template> <script> import { ref, getCurrentInstance } from 'vue'; export default { name: 'userComponent', setup() { const dialogCloseFromSetup = () => { dialogClose(); }; const instance = getCurrentInstance().ctx; const dialogCloseFromInstance = () => { instance.dialogClose(); }; return { dialogCloseFromSetup, dialogCloseFromInstance }; }, }; </script>

Lo que quiero lograr es que el método "dialogClose" esté disponible desde el componente de usuario: plantilla (como el botón 1) y configuración (como el botón 2).

En otras palabras, quiero que se pueda acceder a ese método desde todos los componentes que se pasan al complemento de diálogo. Mi cabeza salta directamente a la opción de extensión porque solía usar antes en vue2

Si se hace clic en el botón 1, todo funciona como se esperaba, pero el segundo botón no funciona, no se puede acceder al método en la configuración.

Encontré una solución a este problema mirando la instancia de vue y accediendo al método desde "getCurrentInstance().ctx". todo funciona como se espera si hago esto (botón 3).

Siento que esta no es una buena solución, por eso pregunto:

• Es la forma en que extiendo el componente vue, ¿correcto?
• Si es correcto, ¿por qué puedo acceder al método directamente en la plantilla y no en la configuración?
• ¿Es una buena idea ejecutar el método desde getCurrentInstance().ctx?