时间戳

首页 > 解决方案 > 事件总线 vuejs 不发出事件以将数据传递给组件

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

问题描述

我第一次使用 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');
  }
});

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>

标签： javascriptvue.jsvuejs2

解决方案

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);
    });

推荐阅读