Así que este es un poco complicado para mí. Tengo un componente Sidebar.vue con un enlace (Ayuda). Quiero activar mi componente Modal.vue con datos diferentes para cada vista principal, por ejemplo. Inicio, Acerca de, Contacto, etc. Entonces, siempre que estoy en Inicio, quiero activar el modal de ayuda con sugerencias a través de ese enlace para Home.vue, cuando estoy en Acerca de, quiero mostrar sugerencias para Acerca de.vue, etc.
Mi código:
Barra lateral.vue
<template> <ul> <li> <a @click="openHelp">Help</a> </li> </ul> </template> <script> export default { name: 'Sidebar', methods: { openHelp() { this.$emit('help-modal'); }, }, }; </script>Modal.Vue
<template> <div class="modal" v-if="open"> <div class="modal-title"> <h4>Help</h4> </div> </div> </template> <script> export default { name: 'Modal', props: { open: { type: Boolean, default: false, } }, methods: { close() { this.$emit('closed'); }, }, }; </script>Inicio.vue
<template> <div> Home <modal :open="helpOpen" @closed="openHelpModal"> <p>Home Help</p> </modal> </div> <template> <sidebar/> </template> </template> <script> import Sidebar from '@/components/Sidebar.vue'; export default { name: 'Home', components: { Sidebar, }, data() { return { helpOpen: false, } } methods: { openHelpModal() { this.helpOpen = !this.helpOpen; }, } } </script>Sé que vuex sería la mejor solución, pero no tengo idea de cómo abordarlo. Modal mostraría solo imágenes estáticas con un poco de texto para cada vista principal.
Una forma de hacer esto sería simplemente agregar una propiedad al componente modal, por ejemplo, helpData y pasar los datos relevantes a este accesorio en cada una de las páginas principales, como se muestra a continuación.
Modal.vue
<template> <div class="modal" v-if="open"> <div class="modal-title"> <h4>Help</h4> </div> </div> </template> <script> export default { name: 'Modal', props: { open: { type: Boolean, default: false, }, helpData: { type: String, required: true } }, methods: { close() { this.$emit('closed'); }, }, }; </script>Inicio.vue
<template> <div> Home <modal :open="helpOpen" @closed="openHelpModal" :help-data="This is a sample help data for the home view" /> </div> <template> <sidebar @help-modal="helpOpen = true"/> </template> </template> <script> import Sidebar from '@/components/Sidebar.vue'; export default { name: 'Home', components: { Sidebar, }, data() { return { helpOpen: false, } } methods: { openHelpModal() { this.helpOpen = !this.helpOpen; }, } } </script> Como lo indica @ljubadr , he incluido la lógica que abriría el modal en el componente de la barra lateral de Home.vue . Además, le recomendaría que cambie el nombre de la función openHelpModal a closeHelpModal (dado que esta función básicamente cerrará el modal) o toggleHelpModal (dado que, según la lógica de la función, cambia el estado modal).