1

Para usar la función mounted en vue la debes de poner al mismo nivel que

  • data
  • methods
  • etc.

Pero al usar Vue CLI con componentes solo puedo mapear:

  • states
  • mutations

En mi vista, pero la función mounted no se encuentra dentro de ninguno de esos dos

Entonces ese es mi problema:

¿Dónde coloco el mounted y cómo lo mando a llamar en mi vista?

3
  • Es decir tu duda va hacia: ¿cómo hacer uso de mounted en los sigle file components de Vue?
    – user128299
    Commented el 6 mar. 2020 a las 5:35
  • exacto, tengo un componente que tiene un método para mostrar unos asientos y queria mostrarlos al cargar la página y por eso quiero usar esa funcion pero no se como usar ese método mounted en vue cli, solo lo sé usar en vue normal Commented el 6 mar. 2020 a las 5:39
  • No entiendo la pregunta, ¿has creado un proyecto con Vue CLI? ¿Qué es lo que no puedes hacer? Commented el 6 mar. 2020 a las 7:38

1 respuesta 1

0

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.