Vue 命名槽不会渲染文本或包含文本的 Div Vue 2

Question

我创建了一些可重用的 Modal 组件，使我们的应用程序远离 jQuery 和 Bootstrap。

我按照 Laravel Jetstream (Inertia) 堆栈中的组件对这些组件进行了模式化。

首先，我有一个顶级 DialogContainer，其中包含过渡和背景，然后是一个通用插槽。这个顶级组件也包含在对 portal-vue 的调用中，以便我的所有模式都发送到 dialog-helper。

为了简洁起见，我将删除直接来自 TailwindUI 的所有 Tailwind 类。

<template>
  <portal to="dialog-helper">
    <Transition attrs>
      ...
      <div v-show="show" class="classes">
        <slot v-if="show" />
      </div>
    </Transition>
  </portal>
</template>

接下来，我有几种不同类型的对话框，全屏、有脚、确认、普通面板等。这些都具有不同部分的命名插槽，并用 DialogContainer 包裹起来

确认对话框

<template>
  <DialogContainer :show="show" :max-width="maxWidth" :closeable="closeable" @close="closeDialog">
    ...
    <h3 class="classes">
      <slot name="title" />
    </h3>
    ...
    <div class="classes">
      <slot name="content" />
    </div>
    ...
    <div class="classes">
      <CancelButton />
      <ConfirmButton />
    </div>
    ...
  </DialogContainer>
</template>

然后，当我想在模板中使用确认对话框时：

<ConfirmDialog :show="isOpen" @close="isOpen = false" @confirmed="someMethod">
  <template #title>Are You Sure You Want to Delete This Item?</template>
  <template #content>Deleting this will cause a complete nuclear meltdown, this isn't reversable!</template> // this works

  <template #content>
    <div class="row">
      <div class="form-group col-md-12" :class="{ 'has-error': validation.max }">
        <label class="control-label">Maximum Percentage</label>
        <input class="form-control" v-model="form.max" placeholder="Maximum ..." type="number" />
        <span class="help-block" v-if="validation.max">
          {{ validation.max[0] }}
        </span>
      </div>
    </div>
  </template> // This works fine, no problems.

  <template #content>
    <div class="alert alert-warning">
      Romantic notes required for Christmas will get auto-populated on the document when rendered.
    </div>
  </template> // won't open and gives no error in console

  <template #content>
    <WarningAlert> // even wrapped in a component ... 
      <p>Romantic notes required for Christmas will get auto-populated on the document when rendered.</p>
    </WarningAlert>
  </template> // NOPE, this doesn't work either.
</ConfirmDialog>

谁能告诉我我做错了什么，这个确切的策略在 Jetstream 中有效，但这里有些东西对我不起作用。

更新

我发现我可以放置长度最多为 109 个字符的纯文本。之后就失败了……什么？