Partiendo de que tenemos un escenario similar al siguiente:
- Tu Componente.vue, este será tu componente personalizado dedicado a mostrar información de los asientos
- Componente principal App.vue, dentro de este componente general centralizamos la información que sus componentes hijos reciban o que puedan accederla
Dentro del componente App.vue
que es el que invocamos al momento de crear la instancia construimos el método y lo montamos en el hook mounted
de esta forma:
App.vue
<template>
<div id="app">
<TuComponente/>
</div>
</template>
<script>
import TuComponente from "./components/TuComponente";
export default {
name: "App",
fecha: "",
components: {
TuComponente
},
methods: {
muestraFecha() {
this.fecha = new Date()
return this.fecha
}
},
mounted() {
this.muestraFecha();
}
};
</script>
Observaciones
- Declaramos el método que contiene una lógica X
- Montamos el método en el hook
mounted
Ahora necesitamos que ese método que esta montado sea accesible para el componente hijo o el que tu creaste para querer mostrar los asientos y lo hacemos de este modo:
TuComponente.vue
<template>
<div id="hello">Mira: {{ metodoLocal() }}</div>
</template>
<script>
export default {
methods: {
metodoLocal() {
return this.$parent.muestraFecha()
}
}
};
</script>
Donde:
- Creamos un método que opcionalmente se puede llamar igual al que tratamos de acceder
- Para poder usar el método montado del componente padre, hacemos uso de la sintaxis:
this.$parent.nombreMetodo
- Finalmente dentro de la sección de HTML mandamos imprimir el nombre del método que creamos dentro del componente hijo
Finalmente
- La idea de lo anterior, es que el componente que es referenciado por la instancia de Vue a su vez concentre:
- El llamado a los componentes hijos
- Los métodos y la lógica que los componentes hijos usarán
- Los componentes hijos accedan a los métodos y a la lógica asociada a estos según sean sus necesidades
- Que los componentes no declaren el ciclo de vida de los métodos que usarán de forma individual sino que ese aspecto se centralice en el componente que de hecho es llamado por la propia instancia
mounted
en los sigle file components de Vue?