Vuejs'te Kendini Kapatabilen Modal/Dialog Yapmak

Modal ve benzeri komponentleri her sayfaya import etmek ve o sayfaya uyarlamak çok can sıkıcı bir iş olabilir, özellikle de sık kullanılıyorsa. 

Buna en iyi çözüm: Merkezi bir modal kullanarak (en üst parent) bu "modal"a child "component"lerden erişmek olabilir. Aşağıda paylaştığım kodu kendinize uyarlayarak bunu yapabilirsiniz.

<!-- Parent Component -->

<template>
    <div ref="myRef"></div>
  </template>
 
<script>
  export default {
    methods:{
        getMyRef(){
            return this.$refs.myRef
        }
    },
    provide() {
      return{
        parentRef: this.getMyRef
    }
    }
  }
</script>


<!-- Child Component -->

<template>
    <div></div>
</template>

<script>
  export default {
    methods:{
        useRef(){
            this.parentRef().data // Can access data properties
            this.parentRef().method() // can access methods
        }
    }
    inject: ['parentRef']
  }
</script>

Basitçe özetlemek gerekirse kodun işlevi şöyledir: Tanımlamış olduğum refereansı (myRef) provide ile (parentRef) dışa aktarıyorum (ya da sunuyorum). Sonrasında inject ile bu refereansı (parentRef) içeri aktararak kullanıyorum; "this.parentRef().method()" şeklinde mesela.

Bu kodlar modala uyarlandığı zaman ise ortaya şöyle bir sonuç çıkıyor. İster referans yoluyla "modal"ın ilgili metoduna (mesela close) erişerek kapatabilirsiniz ya da component içinden bir buton aracılığı ile ilgili metodu kullanabilirsiniz.