Как вызвать модальный бутстрап и в то же время передать параметр компоненту внутри модального?

Проблема, которую я вижу с тем, что у вас есть, заключается в том, что вы привязываетесь к событию $busiframesrc внутри VideoIFramecreated. Но VideoIFrame создается только при открытии модального окна. Таким образом, если автобус выдает iframesrc, когда модальное окно не открыто, iframesrc будет undefined, когда вы его открываете, потому что оно пропустило событие, когда оно было выдано.

Чтобы решить эту проблему, вы должны поместить код, перехватывающий излучение, за пределы модального компонента.

Вы можете просто поместить его в родителя модального окна и передать как prop компоненту VideoIFrame в шаблоне.

Другие возможные решения, если вы не хотите связывать VideoIFrame с родителем модального окна, — это использовать любое решение для управления состоянием (например, Vuex, Vue.observable()).

Основываясь на вашем первоначальном примере, вот обновление, используя простой магазин (с Vue.observable()). Суммируя:

• бросил $bus использование
• создал простой магазин
• импортировал его как в компонент списка, так и в компонент videoIFrame и использовал его для передачи идентификатора щелкнутого элемента в videoIFrame.

Вот об этом.

Как всегда, используя реквизит. Подробнее об этом можно прочитать здесь https://v2.vuejs.org/v2/guide/components-props.html

Я нашел больше проблем с вашим кодом, так что давайте исправим это.

Нам нужно отправить компонент (videoIframe) с нужным URL-адресом.

 <template>
  <div class = "main">
          <ol>
            <li
              v-bind:key = "searchResult.id"
              v-for = "searchResult in searchResults"
              @click = "showModal(`https://example.com/${searchResult.snippet.resourceId.videoId}`)"
            >
              {{ searchResult.snippet.title }}
            </li>
          </ol>
          <b-modal id = "modal-1" title = "BootstrapVue" v-model = "modalOpen" :hide-footer = "true">
            <p class = "my-4"><VideoIFrame :framesrc = "currentURL " /></p>
          </b-modal>
        </div>
  </div>
</template>

<script>
import VideoIFrame from "@/components/VideoIFrame.vue";

export default {
  components: {
    VideoIFrame
  },
  data() {
    return {
      modalOpen: false,
      currentURL: '',
      searchResults: []
    };
  },
  methods: {
     showModal(videoURI){
         this.showModal = true;
         this.currentURL = videoURI;
      }
  }
};
</script>

Компонент iframe - должен объявить, что он получает реквизит по имени "iframesrc", а не в объекте данных.

<template>
  <div class = "videoWrapper">
    <iframe
      :src = "iframesrc"
      frameborder = "0"
      allow = "autoplay; encrypted-media"
      allowfullscreen
    ></iframe>
  </div>
</template>
<script>
import { bus } from "../main";

export default {
  props: ['iframesrc']
};
</script>