Estoy tratando de obtener $ refs en Vue 3 usando la API de composición. Esta es mi plantilla que tiene dos componentes secundarios y necesito obtener una referencia a una instancia de componente secundario:
<template> <comp-foo /> <comp-bar ref="table"/> </template>En mi código, uso Refs de plantilla : ref es un atributo especial que nos permite obtener una referencia directa a un elemento DOM específico o una instancia de componente secundario después de montarlo.
Si uso la API de opciones, no tengo ningún problema:
mounted() { console.log("Mounted - ok"); console.log(this.$refs.table.temp()); }Sin embargo, al usar la API de composición me sale el error:
setup() { const that: any = getCurrentInstance(); onMounted(() => { console.log("Mounted - ok"); console.log(that.$refs.table.temp());//ERROR that.$refs is undefined }); return {}; }¿Alguien podría decir cómo hacerlo usando la API de Composición?
Debe crear la constante de referencia dentro de la configuración y luego devolverla para que pueda usarse en el html.
<template> <div ref="table"/> </template> import { ref, onMounted } from 'vue'; setup() { const table = ref(null); onMounted(() => { console.log(table.value); }); return { table }; }<template> <your-table ref="table"/> ... </template> <script> import { ref, onMounted } from 'vue'; setup() { const table = ref(null); onMounted(() => { table.value.addEventListener('click', () => console.log("Event happened")) }); return { table }; } </script>Dentro de su otro componente, puede interactuar con los eventos que ya registró en el gancho del ciclo de vida de onMounted como en mi ejemplo, he registrado solo un evnet
Si lo desea, puede usar getCurrentInstance() en el componente principal como este código:
<template> <MyCompo ref="table"></MyCompo> </template> <script> import MyCompo from "@/components/MyCompo.vue" import { ref, onMounted, getCurrentInstance } from 'vue' export default { components : { MyCompo }, setup(props, ctx) { onMounted(() => { getCurrentInstance().ctx.$refs.table.tempMethod() }); } } </script> Y este es el código del componente hijo (aquí lo llamé MyCompo ):
<template> <h1>this is MyCompo component</h1> </template> <script> export default { setup(props, ctx) { const tempMethod = () => { console.log("temporary method"); } return { tempMethod } }, } </script>