Tengo un proyecto VueJS, que en una vista hay componentes principales y secundarios que usan el mismo componente llamado deleteModal .
Cuando activé el modal desde el niño (para mostrarlo), activa tanto el modal secundario como el principal (excepto que no se pasan datos al modal activado por el padre). Según tengo entendido, esto se debe a que he usado el componente dos veces, en el ejemplo principal y secundario a continuación. Para tener en cuenta, funciona como se esperaba de los padres.
Investigué y probé algunas cosas: establecer un valor clave para cada uno de los componentes, cambiar el nombre de ref de los componentes, entre otras cosas. También intenté usar v-show para mostrar solo el componente justo antes de activar el modelo principal; sin embargo, esta solución no es la ideal.
¿Cómo puedo activar solo el modal del niño?
Componente principal
<template> <div> <childCompt ref="childCompt" /> <deleteModal ref="deleteModal" @deleteTriggerAPI="deleteAPIParent" /> </div> <template>Componente hijo - childCompt
<template> <div> <deleteModal ref="deleteModal" @deleteTriggerAPI="deleteAPIChild" /> </div> <template>Mi vieja respuesta no es nada buena. Personalmente, para mostrar y ocultar elementos usando jquery en vue. Para mí en este momento, esta es la mejor solución, pero tal vez no sepa cuál es la mejor.
Si desea usar solo vue i usando también el paso variable al niño del padre, lo que admitirá visible su modal.
Pasamos variable con ":" y registramos evento con "@".
<template> <childComponent :isModalOpen="isModalOpen" @onModalClose="isModalOpen=false"> <template> export default { name:"parent", data: () => { isModalOpen: false } }En niño captamos esto mediante el uso de accesorios. Necesitamos definir el tipo de variable que pasamos. La diferencia entre los accesorios y los datos es que en los accesorios no podemos cambiar el valor en el componente secundario.
export default { name: "child", props: { isModalOpen: Boolean } }Y puede usar esta variable para mostrar u ocultar modal. También en el componente secundario podemos crear un botón para cerrar el modal y emitimos un evento al principal para cambiar el valor de la variable.
Para hacer esto usamos this.$emit('eventName');
Más información aquí: https://forum.vuejs.org/t/passing-data-back-to-parent/1201
Podría intentar definir globalmente el componente,
es decir, en main.js
Vue.component('deleteModal',deleteModal)