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

Question

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

    });