vue でモーダルウィンドウに複数の種類のコメントを表示する

  
new Vue({  
  
data:{postItem},  
methods:{  
  
openModal: function (item) {  
      console.log("openModal "+item)  
      this.showContent = true  
      this.postItem = item  
      console.log("this.postItem "+this.postItem)  
    },  
closeModal: function () {  
      console.log("closeModal")  
      this.showContent = false  
    },  
}  
})  
  

  
Vue.component('open-modal', {  
  props: ["val"],  
  template: `  
    <div id="overlay" v-on:click="clickEvent">  
        <div id="content">  
          <p>{{ val }}</p>  
          <button v-on:click="clickEvent">close</button>  
        </div>  
    </div>  
    `,  
  methods: {  
    clickEvent: function () {  
      this.$emit('from-child')  
    }  
  }  
})  

<open-modal :val="postItem" v-show="showContent" v-on:from-child="closeModal"></open-modal>