vue.js - 如何按特定顺序加载 vuejs 组件？

Question

我有一个包含两个子组件的父组件。两个子组件之一将通过 axios 调用将数据存储在数据库中。第二个子组件将需要查询数据库以获取这些数据。

如何确保在第一个插入数据之前第二个不会“启动”？

我应该使用自定义事件吗？

标签： vue.jsvue-component

Answer 1

我会使用v-if条件渲染async/await，例如：

<first-component />
<second-component v-if="didFirstComponentFinish" />

data() {
  return {
    didFirstComponentFinishAjax: false
  }
}, ...
async methods: { //or where you make your AJAX call
  await yourAjaxCall

  this.didFirstComponentFinishAjax = true //after the call is finished the component will show

  // your AJAX logic
}

当然，通过 props、vuex 或您拥有的任何逻辑传递您的 AJAX 数据。