Tengo el siguiente escenario. tengo este componente
<div class="flex items-start gap-4"> <div class="flex w-full flex-col gap-4"> <div class="border shadow p-2"> <chart :config="lineConfig" ref="linechart" /> </div> </div> <options :chart="$refs.linechart" :resolution="lineResolution" :maxTicksLimit="lineMaxTicksLimit" ></options> </div> En mis options.vue
export default Vue.extend({ props: ['resolution', 'maxTicksLimit', 'chart'], watch: { resolution() { this.chart.update() }, maxTicksLimit() { this.chart.update() }, }, created() { setTimeout(() => { console.log(this.chart) }, 100) }, }) Siempre me queda undefined . Entiendo que el componente aún no se montó y necesitaría usar $nextTick() , pero si paso :chart="$refs" entonces veo en la consola { linechart: ... }
También una nota al margen: si interactúo con el gráfico, por ejemplo, usando chart.update() , entonces this.chart ya no está indefinido.
Mi objetivo es pasar el gráfico con $refs.linechart para poder usar los métodos del componente
De documentos de Vue
Una nota importante sobre el tiempo de registro de la referencia: debido a que las propias referencias se crean como resultado de la función de renderizado, no puede acceder a ellas en el renderizado inicial, ¡todavía no existen! $refs tampoco es reactivo, por lo tanto, no debe intentar usarlo en plantillas para el enlace de datos.
Así que eso explica casi todo el comportamiento. Si está vinculando $this.linechart , pasará indefinido en el primer renderizado porque la referencia aún no existe. Si está vinculando $refs , pasa una referencia al objeto $refs , que se actualiza de forma no reactiva.
Sólo puedo pensar en una solución. Renderice el componente de options solo después de que se haya renderizado el padre, para que se complete el objeto $refs y no cuente con su reactividad. Me gusta:
<options v-if="rendered" :chart="$refs.linechart" :resolution="lineResolution" :maxTicksLimit="lineMaxTicksLimit" ></options> data(){ rendered: false }, mounted() { this.$nextTick(() => this.rendered = true) }