Necesito ayuda con algunos conceptos lógicos básicos de Vue (versión 2) sobre la comunicación entre componentes, parece que no puedo entender ...
Tengo un tablero (Dashboard.vue) desde el cual abro una ventana emergente: <FormXPopup v-show="isVisible">
Dentro de FormXPopup.vue tengo un componente emergente <Popup> con una ranura de contenido.
La ventana emergente tiene un botón de cierre que emite "cerrar" que alterna el valor booleano isVisible en Dashboard.vue.
En la ranura de contenido de Popup, coloqué un componente de formulario: <FormX>
FormX tiene validación de formulario. Y un botón de cancelación que también emite 'cerrar' en Dashboard.vue.
Ahora quiero borrar toda la validación al cerrar la ventana emergente.
Puedo borrarlo fácilmente y luego emitir 'cerrar' cuando hago clic en el botón cancelar desde dentro de FormX.vue.
Sin embargo, cuando hago clic en el botón de cerrar que se encuentra en <Popup> , no sé cómo borrar el formulario.
Además, Popup se está reutilizando, por lo que estoy buscando una solución flexible.
Entonces, ¿cómo borro el formulario (el niño) cuando cierro la ventana emergente (el padre)?
Hay una diferencia entre v-show y v-if en Vue.js
Cuando usa v-show , Vue renderizará FormXPopup y aplicará display: none; hasta que isVisible === true .
Esto cuesta más al cargar la página, pero cambiar la variable tiene un rendimiento económico. Esto debe usarse cuando la variable cambia mucho.
Cuando usa v-if , Vue no renderizará el componente hasta que la condición sea verdadera. Una vez que se procesa el componente, si la condición vuelve a ser falsa, el componente se destruirá. Por lo tanto, no necesita borrar el formulario manualmente.
Esta solución cuesta menos al renderizar la página inicial, pero lleva más tiempo cuando cambia la variable.
Sabiendo eso, debe usar v-if en esa situación ya que isVisible no cambia tanto, y dado que la ventana emergente tiene un estado que debe reiniciarse cada vez.
v-show es solo lógica de ajuste de estilo.
v-show:false es para agregar display: none en el estilo de esta etiqueta.