vue2父组件调用子组件弹框

为了在Vue2中实现父组件调用子组件弹框，可以使用Vue.js的自定义事件和插槽。具体步骤如下：

1.在父组件中引入子组件，并在需要弹出子组件的地方添加一个按钮或其他触发事件。

2.在子组件中，使用Vue.js的插槽来显示弹框内容，并使用Vue.js的自定义事件来控制弹框的显示和隐藏。

下面是一个示例代码：

父组件：

<template>
  <div>
    <button @click="showDialog = true">打开弹框</button>
    <child-dialog :show="showDialog" @close="showDialog = false">
      <p>这是弹框内容</p>
    </child-dialog>
  </div>
</template>

<script>
import ChildDialog from './ChildDialog.vue'

export default {
  components: {
    ChildDialog
  },
  data() {
    return {
      showDialog: false
    }
  }
}
</script>

子组件：

<template>
  <div v-if="show">
    <div class="dialog-mask"></div>
    <div class="dialog-wrapper">
      <div class="dialog-content">
        <slot></slot>
        <button @click="$emit('close')">关闭弹框</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

在上面的示例中，父组件中的按钮点击事件会将showDialog属性设置为true，从而显示子组件中的弹框。子组件中使用了Vue.js的插槽来显示弹框内容，并使用了Vue.js的自定义事件@close来控制弹框的关闭。