vue+antd-design-vue+a-modal,从父组件打开子组件弹窗

之前弹窗都是写在同一个页面，后来发现代码越来越多，一个页面轻轻松松都过千了
组件化开发，以组件的形式打开弹窗
首先创建子组件，MoveTreeuserModules.vue
在父页面引入并使用，子组件通设置ref

import MoveTreeuserModules from './MoveTreeuserModules.vue'
 components: { MoveTreeuserModules },
  <move-treeuser-modules ref="moveTreeuserRef" :moveTreeuser="moveTreeuser" />

在父页面的点击按钮上，通过$refs.moveTreeuserRef.方法名 触发子组件的方法

 <a-icon slot="addonAfter" type="check" @click="$refs.moveTreeuserRef.add($event)" />

在子组件中

<template>
  <div class="maincontent">
    <a-modal
      title="创建方式"
      destroyOnClose
      :width="450"
      v-model="visible"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      :zIndex="10000"
      :footer="null"
    >
      <div>
        <div class="labelClass">是否将当前项加入到项目中？？</div>
        <div class="buttonClass">
          <a-button @click="subcommitCreate" type="primary" class="yesButton">是</a-button>
          <a-button @click="subcommitNullCreate" class="noButton">否</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

在add方法中使 this.visible = true 打开弹窗

 add(e) {
      e.stopPropagation()
       this.visible = true   
    },