新建和编辑共用一个页面，怎么实现共同的弹窗代码 用vue2

可以使用 Vue.js 提供的插槽（slot）特性来实现共同的弹窗代码。

首先，定义一个弹窗组件，包括需要共用的弹窗代码，例如：

<template>
  <div class="modal">
    <!-- 弹窗头部 -->
    <div class="modal-header">
      <slot name="header"></slot>
    </div>
    <!-- 弹窗内容 -->
    <div class="modal-body">
      <slot></slot>
    </div>
    <!-- 弹窗底部 -->
    <div class="modal-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

然后，在需要使用弹窗的页面中，通过插槽将页面的内容传递给弹窗组件，例如：

<template>
  <div>
    <modal>
      <!-- 弹窗头部 -->
      <template v-slot:header>
        <h4>编辑用户信息</h4>
      </template>
      <!-- 弹窗内容 -->
      <form>
        <label>用户名：</label>
        <input type="text" v-model="user.name">
        <label>邮箱：</label>
        <input type="email" v-model="user.email">
      </form>
      <!-- 弹窗底部 -->
      <template v-slot:footer>
        <button @click="save">保存</button>
        <button @click="cancel">取消</button>
      </template>
    </modal>
  </div>
</template>

这样，无论是新建页面还是编辑页面，都可以共用相同的弹窗代码，并且可以根据需要灵活地替换弹窗的头部、内容和底部。