Encontré algo extraño cuando trabajaba en el proyecto: el
componente principal <dialog-info/>pasó un parámetro arrdata al componente secundario , que es una matriz.
Debido a que es un parámetro de tipo matriz, el componente secundario lo recibió y el valor predeterminado devolvió una matriz vacía a través de la función, y
luego el componente hijo se verificó de forma rutinaria. ¿Obtuviste el valor normalmente? Me
sorprendió, ¡resultó ser una matriz vacía!
Pero los accesorios en la herramienta de depuración de Vue normalmente se obtienen. Es un
poco interesante. Luego lo pensé basándome en la estructura del proyecto y descubrí dónde estaba el problema.
El proyecto es así:
esta es la página donde se encuentra el componente principal. Haga clic en el botón azul para agregarlo, y el método de devolución de llamada se activará para mostrar el <DialogInfo>componente secundario
. El valor pasado por el componente principal al componente secundario arrdataes obtenido aquí escuchando de forma asincrónica
y luego renderizado en En esta lista:
Aquí está el problema del orden de carga de los componentes. ¿Por qué no puedo obtener datos de los subcomponentes en este momento? Porque cuando se <DialogInfo>carga el componente secundario , el componente principal aún no ha obtenido el valor de retorno asincrónico.
Entonces, para obtener el valor, podemos juzgar por el componente principal. Solo cuando se obtiene el valor, es decir, la longitud del valor de la matriz pasada por el componente principal al componente secundario no es 0, luego se representa:
Esto asegura que el componente secundario debe esperar. El componente principal prepara los datos y luego los carga, el resultado:
¡Hay una solucion!
Es a través del <el-dialog>método incorporado del componente elementui openedo la openejecución de la función de devolución de llamada. Estas dos funciones se <el-dialog>ejecutarán después de que se abra el componente.
Mi componente hijo <dialog-info>es un <el-dialog>componente empaquetado , por lo que siempre que el cuadro de diálogo esté abierto, estará disponible en la función de devolución de llamada. ¡El valor pasado por el componente principal!
El método abierto está vinculado al componente secundario:
defina un método de devolución de llamada y regrese: de
modo que cuando hagamos clic en el botón, aparecerá el cuadro de diálogo
y podemos obtener el valor en el método de devolución de llamada, porque los datos ya se obtuvieron en este hora:
