在父级中运行ajax调用，并使用Vue.js在子级中调用成功

Question

在父级中进行ajax调用然后在子级中运行success函数的最佳方法是什么？

例如：

//父

var ajax = myAjaxCall.fetch(); //returns a promise

//元器件

ajax.success({... //etc.

此外，该组件应该观察ajax是否再次运行，如果父母再次拨打该号码，它可以再次更新。

Answer 1

您可以向子组件添加ref属性，然后从父组件的范围调用子方法：

在子组件中：

methods: {
  successHandler(promise) {
    promise.success(() => { });
  }
}

在父组件中：

methods: {
  fetch() {
    var ajax = myAjaxCall.fetch();
    this.$refs.child.successHandler(ajax);
  }
}

在模板中：

<child ref="child"></child>

Answer 2

父模板：

for key, value in item.items():
    if key in total:
        total[key] += value
    else:
        total[key] = value

父脚本：

<div>
  <button @click="executeRequest">Execute</button>
  <child-component :result="result">
</div>

子模板：

data: {
  result: null
},
methods: {
  executeRequest () {
    // execute AJAX request using axios, fetch, whatever
    this.result = response
  }
}

子脚本：

<div>
  <div v-if="result">Call was completed and result was: {{result}}</div>
</div>