principal.js
Vue.component("modal",{ template : /*html*/` <div class="modal is-active" > <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title"> <slot name="header"></slot> </p> <button class="delete" aria-label="close" @click="$emit('close')"></button> </header> <section class="modal-card-body"> <slot></slot> </section> <footer class="modal-card-foot"> <slot name="footer"> </slot> </footer> </div> </div> ` }); new Vue({ el:'#root', data : { isActive : false }, });índice.html
<modal v-if="isActive" @close =" isActive = false"> <template slot="header"> Title</template> some thing... <div slot="footer"> <button class="button is-success">Save changes</button> <button class="button" @close="isActive = false">Cancel</button> </div> </modal> El botón dentro del componente funciona bien, el problema está en el otro botón afuera. Así que simplemente quiero este botón "dentro del modal" <button class="button" @close="isActive = false">Cancel</button> para cerrar el modal :) ¡gracias!
Puede escuchar el evento @close solo en el componente como lo hizo aquí <modal v-if="isActive" @close="isActive=false"> . En el botón dentro del componente puede usar @click="isActive=false"
Vue.component("modal",{ template : ` <div class="modal is-active" > <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title"> <slot name="header"></slot> </p> <button class="delete" aria-label="close" @click="$emit('close')"></button> </header> <section class="modal-card-body"> <slot></slot> </section> <footer class="modal-card-foot"> <slot name="footer"> </slot> </footer> </div> </div>` }); new Vue({ el:'#root', data : { isActive : false }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <button @click="isActive = true">open</button> <modal v-if="isActive" @close="isActive = false"> <template slot="header"> Title</template> some thing... <div slot="footer"> <button class="button is-success">Save changes</button> <button class="button" @click="isActive = false">Cancel</button> </div> </modal> </div>