我们在我们的应用程序中使用了Vue 2和DevExtreme组件，并决定迁移到Vue 3。代码如下：

1）Vue2

v-modal-dialog.vue（基础组件）：

<template>
  <DxPopup
    v-bind="$attrs"
    :hide-on-outside-click="true"
    :drag-enabled="true"
    :wrapper-attr="popupAttributes"
    position="center"
    v-on="$listeners"
    @hiding="onHiding"
  >
    <template v-for="(_, slot) in $scopedSlots" #[slot]="props">
      <slot :name="slot" v-bind="props" />
    </template>

    <slot />
    <slot name="footer">
      <DxToolbarItem
        template="save-button"
        toolbar="bottom"
        location="after"
        :disabled="isSaveDisabled"
      />
      <DxToolbarItem
        template="cancel-button"
        toolbar="bottom"
        location="after"
      />
      <!-- <button type="button">BUTTON 1</button>
      DEFAULT FOOTER -->
    </slot>

    <template #save-button>
      <v-button class="save-btn-default" :text="okText" @click="onOkClick" />
    </template>
    <template #cancel-button>
      <v-button
        class="cancel-btn-default"
        :text="cancelText"
        @click="onCancelClick"
      />
    </template>
  </DxPopup>
</template>

<script>
import VButton from "@/components/simple/v-button.vue";
import { DxPopup, DxToolbarItem } from "devextreme-vue/popup";

export default {
  inheritAttrs: false,
  ...
}

v-app-types-modal.vue（从基本组件到命名插槽的扩展组件）：

<template>
  <v-modal-dialog
    :visible="isModalVisible"
    title="CONNECTION"
    okText="Save"
    cancelText="Cancel"
    :isSaveDisabled="isDisabled"
    :width="550"
    :height="780"
    @ok="onOk"
    @cancel="onCancel"
    @hiding="onHiding"
  >
    <DxForm
      :form-data="selectedItem"
      label-mode="static"
      validation-group="selectedData"
      :scrollingEnabled="isScrollingEnabled"
    >
      <DxItem template="type" :is-required="true" />
      <template #type>
        <v-latin-letters-and-digits-text-box
          v-bind:value="selectedItem.type"
          v-on:update:value="($event) => {selectedItem.type = $event}"
          label="Type"
          label-mode="static"
        >
          <DxValidator validation-group="selectedData">
            <DxRequiredRule message="Required field: Type." />
          </DxValidator>
        </v-latin-letters-and-digits-text-box>
      </template>
  ...

  </v-modal-dialog>
</template>

package.json的关键部分如下所示：

"vue": "^2.6.11"
    "vue-loader": "^15.10.1",
    "vue-template-compiler": "^2.6.11"

对话框如下所示：

正如您所看到的，有2个按钮显示从基本组件作为默认内容的命名插槽。

2）Vue3

组件的代码是相同的，除了v-on="$listeners”，这在Vue 3和下面的代码块中是不需要的：

<template v-for="(_, slot) in $slots" #[slot]="props">
  <slot :name="slot" v-bind="props || {}" />
</template>

package.json的关键部分如下所示：

"vue": "^3.2.31"
    "vue-loader": "^17.0.1"
    "@vue/compiler-sfc": "^3.2.47"

对话框如下所示：

正如您所看到的，基本组件中没有2个按钮作为命名插槽的默认内容。
有趣的是，当我取消注解这段代码时：

<!-- <button type="button">BUTTON 1</button>
DEFAULT FOOTER -->

它显示在对话框中，但不是在正确的位置。
我试过很多方法，但都不成功。
是什么问题，我能解决吗？

编辑：

你可以看看这个链接：https://codesandbox.io/s/overview-devextreme-popup-forked-o579wq