Bessere Möglichkeit, die Schaltfläche "modal schließen" in Vue hinzuzufügen

Question

Das funktioniert, aber ich bin mir sicher, dass es einen viel besseren Weg dafür gibt. Bitte schauen Sie sich den document.getElementsByClassName() Teil in der Nähe des Bodens an.

html:

<modal> 
    <a slot="trigger">Show Modal</a> 
    <h3 slot="header">My Heading</h3> 
    <p slot="body">Here is the body of the modal.</p> 
    <div slot="footer"> 
    Here is the footer, with a button to close the modal. 
    <button class="close-modal">Close Modal</button> 
    </div> 
</modal> 

Modal.vue:

<template> 
    <span> 
     <span @click="show = true"> 
     <slot name="trigger"></slot> 
     </span> 
     <slot name="header"></slot> 
     <slot name="body"></slot> 
     <slot name="footer"></slot> 
    </span> 
</template> 

<script> 
    export default { 
     data() { 
      return { show: false } 
     }, 
     mounted(that = this) { 
      document.getElementsByClassName('close-modal')[0].addEventListener('click', function() { 
      that.show = false; 
      }) 
     } 
    } 
</script> 

Gibt es einen besseren Weg, dies zu tun?

Answer 1

Ja, es gibt und es ist close-Ereignis aus innerhalb Modal-Komponente und Handle Schließen in der übergeordneten Komponente, wenn nahe emittieren empfangen wird. Ich kann keinen Kredit nehmen, weil ich dies auf der offiziellen Website here sah.

Grundsätzlich in modal Vorlage

<button @click="$emit("close")">close </button> 

Und dann in der Komponente, wo Sie modal offenen modale Eigenschaft in Daten hinzufügen, verwenden

data: function() { return { open: false }} 

Und wenn Sie modale Komponente verwenden

<modal @close="open = false">...</modal> 

Geist @close ist das Ereignis, das du von modal ausgesendet hast, egal was @die funktioniert, wenn du $ emit ("die") benutzt hast modal.

Und wenn Sie modal öffnen möchten, können Sie ähnlichen Ansatz verwenden

<a @click="open = true">open modal</a> 

Wenn Sie dies seine Daten getrieben und leicht tun wiederzuverwenden.

bearbeiten

Ok also, wenn Sie Tasten von außerhalb der modalen Komponente hinzufügen möchten dann Schlitze definieren und nur eine Schaltfläche in einem dieser Schlitze oder alle von ihnen hinzufügen, dass open = false