事件总线 vuejs 不发出事件以将数据传递给组件

Question

我第一次使用 Vue 事件总线将数据从主 vue 实例传递给子组件。经过一些测试后，我无法获取组件内的数据，我认为代码是正确的，但我不确定这一点。代码有问题吗？我有三个单独的文件（我没有使用 webpack）。两个将保存主 vue 实例和组件的 js 文件和一个将保存模板的文件。我正在开发一个 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);

    },

  }

});

components.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');

  }

});

Answer 1

this.$eventHub.$emit('page_data', this.pageData);不在您的 axios 函数中，因此不会返回任何内容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);    });