шина событий vuejs не генерирует событие для передачи данных компоненту

Question

Я впервые использую шину событий Vue для передачи данных дочерним компонентам из основного экземпляра vue. После некоторого тестирования я не могу получить данные внутри своих компонентов, я думаю, что код правильный, но я не уверен в этом. Что-то не так в коде? У меня есть три отдельных файла (я не использую веб-пакет). Два js файла, которые будут содержать основной экземпляр vue, а также компоненты и файл, который будет содержать шаблон. Я разрабатываю тему WordPress. Любая помощь?

// app.js file
Vue.prototype.$eventHub = new Vue(); // Global event bus

Vue.directive('prlx', VuePrlx.VuePrlxDirective);

new Vue({
  el: '#ume',
  router,
  data: {
    pageData: [],
    feedImg: []
  },
  watch: {
    $route( to, from ){
      console.log('main instance:'+ to, from);
      this.getPage();
    }
  },
  methods: {
    getPage: function(){
      //console.log(this.$route);
      var slug = this.$route.fullPath.replace(/\//g, "")
      axios.get(uptheme.pages_rest_url+'?slug='+ slug)
        .then( (response) => {
        console.log(response.data);
        response.data.forEach( (item, i) => {
          this.pageData = [item];
          if( item.embedded.gallery_images ){
            item.embedded.gallery_images.forEach( (img) => {
              this.feedImg.push(img);
            });
          }
        });
      });
      this.$eventHub.$emit('page_data', this.pageData);
    },
  }
});

компоненты. js файл:

Vue.component('ume-about',{
  template: '#about-tpl',
  data() {
    return {
      pageData: [],
      feedImg: []
    }
  },
  created() {
    this.$eventHub.$on('page_data', (data) => {
      console.log(data);
      this.pageData.push(data);
    });
  },
  beforeDestroy() {
    $eventHub.$off('page_data');
  }
});

about-template. php файл

// This file will only hold the template
<script type="text/x-template" id="about-tpl">
  <div class="container-fluid p-0">
<!-- page cover -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-12 col-lg-12 col-pagecover p-0" v-if="page.embedded.first_featured_image">
        <img class="img-fluid w-100 h-100 position-absolute" :src="page.embedded.first_featured_image">
        <h1 class="text-white position-relative mt-5 pl-5 pt-5" style="z-index:2;" >{{ page.title.rendered }}</h1>
        <h4 class="text-white position-relative pl-5" style="z-index:2;" v-if="page.ucm._page_subtitle[0]">{{ page.ucm._page_subtitle[0] }}</h4>
      </div>
        <div class="overlay position-absolute"></div>
    </div>
<!-- main content -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-6 col-lg-6 mt-md-5 mb-md-5 p-5">
        <p class="" v-html="page.content.rendered"></p>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-6 mt-md-5 mb-md-5 p-0">
        <img class="img-fluid w-100" :src="page.embedded.second_featured_image">  
      </div>
    </div>
<!-- parallax -->
    <uptheme-parallax v-for="(page, idx) in pageData" :url="page.embedded.parallax_image" :message="page.excerpt.rendered" ></uptheme-parallax>
<!-- swiper slider -->
    <uptheme-swiper :feed-img="feedImg"></uptheme-swiper>
<!-- colonna 1 -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-6 col-lg-6 p-0 mt-md-5 mb-md-5" v-if="page.embedded.col_1_image">
        <img class="img-fluid w-100" :src="page.embedded.col_1_image" />
      </div>
      <div class="col-sm-12 col-md-6 col-lg-6 p-5 mt-md-5 mb-md-5" v-if="page.ucm._col_1[0]">
        <h4 class="" v-if="page.ucm._col_1_title[0]">{{ page.ucm._col_1_title[0] }}</h4>
        <p class="" v-html="page.ucm._col_1[0]"></p>
      </div>
    </div>
<!-- colonna 2 -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-6 col-lg-6 p-5 mt-md-5 mb-md-5" v-if="page.ucm._col_2[0]">
        <h4 class="" v-if="page.ucm._col_2_title[0]">{{ page.ucm._col_2_title[0] }}</h4>
        <p class="" v-html="page.ucm._col_2[0]"></p>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-6 mt-md-5 mb-md-5 p-0" v-if="page.embedded.col_2_image">
        <img class="img-fluid w-100" :src="page.embedded.col_2_image" />
      </div>
    </div>
  </div> <!-- end container-fluid -->
</script>

Answer 1

this.$eventHub.$emit('page_data', this.pageData); не в вашей функции топора ios и поэтому ничего не вернет

axios.get(uptheme.pages_rest_url+'?slug='+ slug)
    .then( (response) => {
        console.log(response.data);
        response.data.forEach( (item, i) => {
          this.pageData = [item];
          if( item.embedded.gallery_images ){
            item.embedded.gallery_images.forEach( (img) => {
              this.feedImg.push(img);
            });
          }
        });

        this.$eventHub.$emit('page_data', this.pageData);
    });