父组件如何向子组件方法（对话框的封装）

示例如下：

子组件：

<template>
  <div>
    <transition name="drop">
      <!--遮罩层开始-->
      <div class="dialog-mask" v-show="dialogData.isShow">
        <!--对话框开始-->
        <div class="dialog" id="dialog">
          <!--对话框标题开始-->
          <div class="dialog-title modal-header">
            <p>{{dialogData.title}}</p>
            <span class="close" @click="dialogData.btnText[1].method">&times;</span>
          </div>
          <!--对话框内容-->
          <div class="dialog-content">
            <slot name="content"></slot>
          </div>
          <!--对话框底部-->
          <div class="dialog-bottom">
              <button :class="index==0? 'btn btn-primary':'btn btn-default'" v-for="(btnt,index) in dialogData.btnText" @click="btnt.method">{{btnt.text}}</button>
          </div>
        </div>
        <!--对话框结束-->
      </div>
      <!--遮罩层结束-->
    </transition>

  </div>
</template>
<style scoped>
  .drop-enter-active,.drop-leave-active{
    transition: all .5s ease;
  }
  .drop-enter,.drop-leave-to{
    opacity: 0;
  }
  .dialog-mask{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.2);
  }
  .dialog{
    width:50%;
    height:50%;
    position: fixed;
    left:25%;
    top:25%;
  }
  .dialog-title{
    width:100%;
    height:18%;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    display: table;
  }
  .dialog-title p{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .dialog-title span{
    position: absolute;
    right: 3%;
  }
  .dialog-content{
    width:100%;
    height:66%;
    background: #fff;
  }
  .dialog-bottom{
    width:100%;
    height:16%;
    border-top:1px solid #E5E5E5;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    background: #fff;
    position: relative;
  }
  .btn{
    padding:.5%  3%;
  }
  .dialog-bottom >button:nth-child(1){
    position: absolute;
    left:38%;
    top:25%;
  }
  .dialog-bottom >button:nth-child(2){
    position: absolute;
    left:50%;
    top:25%;
  }
</style>
<script>
  export default{
    props:{
      'dialogData':{
        type:Object
      }

    }
  }
</script>

父组件：

<template>
    <div id="all">
      <my-dialog :dialogData = dialogData>
        <div slot="content">我是对话框内容</div>
      </my-dialog>
    </div>
</template>
<style scoped>
  #all{
    width:100%;
    height:100%;
  }

</style>
<script>
  import myDialog from './dialog.vue'

    export default{
        data(){
            return {
              dialogData:{
                title:"提示",
                isShow:true,
                btnText:[
                  {"text":"确定","method":this.sure},
                  {"text":"取消","method":this.close}
                ]
              }
            }
        },
        methods:{
          sure(){
            alert("确定");
          },
          close(){
            alert("取消");
            this.dialogData.isShow = false;
          }
        },

        components: {
          myDialog
        }
    }
</script>