javascript - Bootstrap-Vue - 使子组件在 b 模态组件内工作

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>