Vueに "close modal"ボタンを追加するより良い方法

Question

これはうまくいきますが、これを行うもっと良い方法があると確信しています。下部のdocument.getElementsByClassName()部分を見てください。

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> 

はこれを行うには良い方法はありますか？

Answer 1

はい閉じる発光を受信すると、モーダルコンポーネント内からクローズイベントが発生し、親コンポーネント内のハンドルクローズよりも優先されます。私は公式のvueサイトhereでこれを見たので、私は信用できません。モーダルテンプレートでの基本的

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

そしてあなたはモーダルデータ

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

そして、あなたはモーダルコンポーネントを使用

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

マインドにオープンモーダルプロパティを追加使用してコンポーネントで@closeはあなたがモーダルから放出したイベントです。$ emit（ "die"）をモーダル。

そして、あなたはモーダルを開きたいときにこのそのデータが駆動され、再利用しやすい行う場合には、同様のアプローチ

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

を使用することができます。

編集

[OK]を使用すると、モーダルコンポーネントの外側からボタンを追加したい場合は、あなたのスロットを定義し、ちょうどopen = false