Question

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

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

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

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数据。

Answer 2

您只需要使用v-if =“ dataFromFirstChild”

示例：

HTML：

<first-child></first-child>
<second-component v-if="dataFromFirstChild" >

脚本：

data() {
   return {
      dataFromFirstChild: false
   }
},
beforeMount(): { 
    axios.get('...')
    .then(function (response){

        //now do whatever you want with the response             

        this.dataFromFirstChild = true; //render the secondChild now
    }.bind(this)))
    .catch(function(error) {
        console.log(error);
    });
}

如何按特定顺序加载vuejs组件？

2 个答案: