Soy relativamente nuevo en Vue JS, pero siento que tengo una comprensión relativamente buena de la jerarquía de componentes. Solo encuentro un problema aquí que me confunde un poco y que realmente no coincide con mi comprensión de lo que deberían hacer los props .
En mi componente principal, tengo un atributo data llamado loading , que se inicializa como true . También tengo un atributo llamado dataItems , que se inicializa como null pero se completa con un método asincrónico que llama a una API. En el punto en el que los elementos de dataItems se completan con éxito, loading también debe establecerse en falso. Esta llamada a la API se realiza dentro de la función mounted .
Todo funciona como se esperaba en el nivel principal, pero pasar estos dos atributos al componente secundario (a través de accesorios) solo parece transmitir su estado inicial ( true y null , respectivamente) y nunca actualizarlos.
Como ejemplo rápido, agregué algunas etiquetas <p> a los componentes principal y secundario como una forma de generar los datos, aquí está la abreviatura HTML y JS que usé.
Componente principal:
<template> <p>Loading: {{loading}}</p> // outputs Loading: false <p>dataItems: {{dataItems}}</p> //outputs JSON string <ChildComponent :loading="loading" :dataItems="dataItems" /> </template> <script> data: function() { loading: true dataItems: null }, methods: { getDataItems: async function() { //.. make API call this.dataItems = response.data loading = false } }, mounted: function() { this.getDataItems() } </script>Componente hijo:
<template> <p>Loading: {{loading}}</p> // outputs Loading: true <p>dataItems: {{dataItems}}</p> //no output </template> <script> props: ["loading", "dataItems"], data: function() { loading: this.loading dataItems: this.dataItems }, </script>Entonces, cuando los componentes padre e hijo se procesan juntos, esto es lo que veo:
Loading: false // from parent dataItems: {"someJsonString"} // from parent Loading: true // from child //from childNo entiendo por qué los datos que se transmiten no se actualizan, ya que entendí que este era el punto de Vue. Como digo, soy relativamente nuevo en el marco, por lo que existe la posibilidad de que haya cometido un simple error.
Si alguien puede darme un punto en la dirección correcta, ¡realmente lo agradecería!
Gracias
su código es correcto, pero parece que el enfoque que decidió implementar con props no es conveniente para esta situación.
Estás (como mencionas) inicializando tu estado Child (sus datos) con accesorios. Este enfoque es útil cuando necesita cambiar estos datos desde su componente secundario, ya que no puede cambiar una propiedad directamente desde un componente secundario, solo el principal puede hacerlo.
Ahora, veo que el propósito de su componente Child es solo mostrar información que envía el padre (a través de accesorios). Por lo tanto, puede acceder directamente desde su plantilla a los valores de accesorios que son referencias (son reactivos).
Componente secundario que accede a accesorios en la plantilla:
<template> <p>Loading: {{ loading }}</p> <p>dataItems: {{ dataItems }}</p> </template> <script> props: ["loading", "dataItems"], data: function() { // Use the props directly in your template }, </script>