Question

我是VueJS的新手，我很难分享来自AJAX Request的两个模板的结果。

这是主页：

<div>
   <search-bar></search-bar>
   <tracking-results></tracking-results>
</div>

这是搜索栏组件，我有一个文本输入字段，按下按钮后，它将执行Ajax请求：

<template>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-3">
            <div class="col-lg-5">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Numero Spedizione" v-model="trackingNumber">
                    <span class="input-group-btn">
                    <button class="btn btn-default"
                            type="button"
                            @click.prevent="search">Ricerca</button>
                  </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-3 -->
        </div>
    </div><!-- /.row -->
</template>

<script>
    export default {
        data() {
            return {
                trackingNumber: '',
            }
        },
        methods: {
            search() {
                Vue.http.options.emulateJSON = true;

                this.$http.post('/endpoint').then(function (response) {
                    var parsedResponse = JSON.parse(response.data) || undefined;
                    /* HERE I WANT TO SEND THE RESPONSE TO ANOTHER COMPONENT */
                }, function (err) {
                    console.log('ERROR', err);
                });
            }
        }
    }
</script>

我曾尝试使用$broadcast，但我的组件不是孩子，是兄弟姐妹。

我确实看到了一种方式可以是Vuex，但我的应用程序不会完全用Vue编写。我将使用此框架来“简化一些Javascript过程”。

我找到的唯一选择是将search-bar和tracking-result“合并”到一个组件中。通过这种方式，数据将被“共享”，我可以与州进行通信。

Answer 1

[更新：sync is removed in Vue 2，因此您需要遵循标准props-down, events-up design pattern]

您可以让父视图模型将支柱传递给搜索栏的每个组件using sync。搜索栏将填充ajax调用中的值，它将同步到父级并向下跟踪到跟踪结果。

一些示例代码：

Vue.component('child1', {
  props: ['ajaxData'],
  methods: {
    loadData: function () {
      this.ajaxData = 'Some data is loaded';
    }
  },
  template: '<div>Child1: {{ajaxData}} <button v-on:click="loadData">Load data</button></div>'
});
Vue.component('child2', {
  props: ['ajaxData'],
  template: '<div>Child2: {{ajaxData}}</div>'
});
new Vue({
  el: 'body',
  data: {
    hi: 'Hello Vue.js!'
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<child1 :ajax-data.sync='hi'></child1>
<child2 :ajax-data='hi'></child2>

Answer 2

理想情况下，您可以将数据发送到父级，然后父级通过props将数据发送到组件。父母处理兄弟姐妹之间的沟通。

另一种方法是使用状态管理或vuex。但这取决于项目的复杂程度。如果这很简单，我建议让父母处理通信。

VueJS - 模板之间的Ajax通信

2 个答案: