动态组件未在其他页面上的事件上呈现

Question

我目前正在使用引导模态，并在 layouts / default.vue

中进行渲染

<template>
  <div>
    <Navbar/>
    <b-container>
      <nuxt/>
      <b-modal id="modal1" title="Bootstrap-Vue">
        <div> 
           <component :is="dynamicComponent"></component>
        </div>
      </b-modal>
    </b-container>
  </div>
</template>



  <script>
     export default {
      data() {
        return  { 
          dynamicComponent: null
        }
      }
     }
   </script>

以及我其他页面的 items / search.vue

我正在显示可以单击以显示模式的项目集合。

   <template>
     <div>
       <div @click="showModal" class="item-card">
          <b-card overlay
            :title="name"
            :img-src="cardImg"
            img-alt="Image"
            img-top
            tag="article"
            style="max-width: 20rem;"
            class="mb-2">
          </b-card>
       </div>
      </div>
    </template>

    <script>
      import FormInput from '~/components/FormInput';
      export default {
        name: 'ItemPreview', 
        props:   {
          uuid: { type: String, required: true }, 
          name: { type: String, required: true },
          dataset: { type: String, required: true },
          images: { type: Array, required: false },
          cardImg: { type: String, required: false, default: '1.jpg' }
        }, 
        methods: {
          showModal(event) {
            // FormInput to dynamicComponent and show modal 
            this.dynamicComponent = FormInput;
            this.$root.$emit('bv::show::modal','modal1');
          }
        }
      }
    </script>

我设法显示了模态，但我想渲染从 items / search.vue

导入的组件