Question

我有两个组件

1.Search

export default {
  mounted() {
    console.log('Component mounted :: SearchGas')
  },
  data() {
    return {
      form: new Form({
        distributor: '',
        supplier: ''
      })
    };
  },
  methods: {
    onSubmit() {
      let str = "distributor=" + this.form.distributor + "&supplierId=" + this.form.supplier;
      let baseUrl = 'wfengine/price_filter_gas_1/';

      Bus.$emit('cards_search_query', baseUrl + '?' + str);

      //Here I am updating Vikram
      this.$router.push('/results/' + encodeURIComponent(baseUrl + '?' + str));
    }
  }
}

3.结果

export default {
  mounted() {
    console.log('Component mounted :: Results');
    // console.log(this.$route.params.items);
    Bus.$on('cards_search_query', function(query) {
      console.log(query);
    })
  },
  data() {
    return {
      cardList: [],
      form: new Form({}),
      dataList: [],
      createCardList
    };
  }
}

在我的Appjs中，我正在调用我正在做的所有文件

window.Bus = new Vue({});

问题

当我重定向到结果页面时，我没有看到任何内容控制台中的值

Answer 1

基于所提供信息的可能原因是，在发出事件时，其他组件不在DOM中，因此它不会对事件做出反应。

在这种情况下，我建议使用带参数的路由，因此第一个组件将触发路由+str或类似的东西，第二个组件将从路径获取参数。

其他方式，但在我看来这并不好，就是在Vuex中使用Vuex和存储查询，因此第一个组件会将查询提交给Vuex，第二个组件会从Vuex获取它。但是，我建议先解决。

如果您有一些数据需要在组件之间共享，但实际上并不想暴露它（但请记住，在前端方面，所有内容都或多或少地暴露出来，这只是需要努力的问题为了得到它，你理论上可以使用LocalStorage作为路由参数/ Vuex的替代解决方案。

另一种解决方案（这么多）解决方案是以这种方式解决您的路线，您将拥有一些父组件，例如SEARCH-PARENT <router-view>和2个嵌套路线与您的组件SEARCH-DIALOG＆amp;搜索结果。对话框现在会发出事件，父母会做出反应，然后在路线改变时将其传递给结果。也许这样？

Answer 2

你好，正如MU解释的那样，这就是我解决它的方法。

我安装了VueX

npm install vuex --save

然后在我的app.js页面中，它是父实例

import Vuex from 'vuex';

Vue.use(Vuex);
 const store = new Vuex.Store({
  state: {
    cards_search_query: 'ss'
  }
});

然后在我的搜索页面

中

methods : {

          onSubmit(){

              let str = "distributor="+this.form.distributor+"&supplierId="+this.form.supplier;

              let baseUrl = 'wfengine/price_filter_gas_1/';

              this.$store.state.cards_search_query = baseUrl+'?'+str;
              //Here I am updating Vikram
              this.$router.push('/results/');

          }
        }

在我的结果页面

中

mounted() {
        console.log('Component mounted :: Results');
        console.log(this.$store.state.cards_search_query);
    },

请注意

this.$store.state.cards_search_query = baseUrl+'?'+str;

虽然使用Vuex可能会过度杀死像这样的简单任务。

通过总线共享数据的Vue js无效

2 个答案: