Bootstrap-Vue - 使子组件在 b-modal 组件中工作

Question

因此，由于某种原因，当我将子组件添加到 <b-modal> 组件时，它无法正确显示模式。看起来 :is="currentModal" 没有被正确读取。

  <b-modal size="lg" v-model="currentModal" @ok="currentModal = null">
    <component :is="currentModal" :email="email"></component>
  </b-modal>

基本上 currentModal 是要显示的当前组件。如果我将其更改为 currentModal 是一个字符串，就像这样，它仍然无法正常工作：

  <b-modal size="lg" v-model="currentModal" @ok="currentModal = null">
    <Register v-if="currentModal=='register'":email="email"></Register>
    <Login v-if="currentModal=='login'" :email="email"><Login>
  </b-modal>

如果我完全删除 b-modal 标记，则 Login 和 Register 组件按预期工作，所以问题似乎是 Register 和 Login 组件没有从 b-modal 中正确读取 currentModal，因为一些理由。任何帮助将不胜感激！

Answer 1

您需要使用<b-container> 作为<b-modal> 的直接子元素。

在这种情况下，它将如下所示：

<b-modal size="lg" v-model="currentModal" @ok="currentModal = null">
    <b-container>
        <component :is="currentModal" :email="email"></component>
    </b-container>
</b-modal>