ant-design-vue中實現modal模態框的復用（添加，編輯展示同一個模態框）

用兩個button（添加，編輯）按鈕展示同一個模態框，並不是什么大問題，問題在於解決這兩個模態框得有自己的確定和取消方法

父頁面完全接管子頁面（利於子頁面復用）

父頁面代碼：

<template>
  <div>
　　<-- 定義兩個按鈕，一個添加按鈕，  一個編輯按鈕  -->
    <a-button type="primary" @click="showModal">添加</a-button>
    <a-button type="primary" @click="showEditModal">編輯</a-button>
　　<-- 引入模態框，將modal框的確定和取消方法由此元素觸發調用 -->
    <test-add
      ref="collectionForm"
      :visible="visible"
      @cancel="dialogStatus==='add'?handleCancel():handleEditCancel()"
      @ok="dialogStatus==='add'?handleOk():handleEditOk()"
    />
  </div>
</template>

<script>
  import TestAdd from './modules/TestAdd'
  export default {
    components: { TestAdd },
    data() {
      return {
        dialogStatus:'',
        visible: false,
      };
    },
    watch:{
    },
    methods: {
      // 處理添加方法
      showModal() {
        this.visible = true;
        this.dialogStatus = 'add';
      },
      handleCancel() {
        this.visible = false;
        this.dialogStatus=''
        console.log('add cancel')
      },
      handleOk(){
        console.log('add ok')
      },
      //處理編輯的方法
      showEditModal(){
        this.type = 'edit';
        this.visible = true;
      },
      handleEditCancel(){
        this.visible = false;
        this.dialogStatus = ''
        console.log('edit cancel')
      },
      handleEditOk(){
        this.visible = true;
        console.log('edit ok')
      }
    },
  };
</script>

子頁面代碼：

<template>
　<-- 用emit方法觸發父級方法，自己本身不需要處理方法 -->　
　<-- 表單校驗的時候，可以表單校驗成功了之后再去觸發父元素方法  -->

  <a-modal
    :visible="visible"
    title='Create a new collection'
    okText='完成'
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('ok') }"
  >
    <a-form layout='vertical' :form="form">
      <a-form-item label='Title'>
        <a-input v-decorator="[ 'title' ]" />
      </a-form-item>
      <a-form-item label='Description'>
        <a-input  type='textarea' v-decorator="['description']"/>
      </a-form-item>
      <a-form-item class='collection-create-form_last-form-item'>
        <a-radio-group
          v-decorator="['modifier',{initialValue: 'private'}]">
          <a-radio value='public'>Public</a-radio>
          <a-radio value='private'>Private</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<script>
  export default {
    name: 'TestAdd',
    props: ['visible'],
    data () {
      return {
        form: this.$form.createForm(this)
      }
    }
  }
</script>

<style scoped>

</style>

使用上面這種方式，子頁面基本上不需要處理什么業務邏輯，所有方法都由父頁面實現，這樣就可以把子頁面隨意引用到其他地方去使用，也是官方文檔中的樣例。