Vue中异步调用后向props传递数据

Question

我已经建立了一个简单的 vue 项目来显示问题。我唯一添加的是 axios 包。问题是当我尝试在异步调用后设置子组件的属性时，我无法读取组件中的该属性。如果您查看代码，您会看到我多次控制台日志以显示何时可以获取数据以及何时无法获取数据。请帮我弄清楚我在这里缺少什么。

父母

<template>
  <div id="app">
    <HelloWorld :test_prop="testData" :test_prop2="testData2" :test_prop3="testData3" test_prop4="I work also"/>
    <div>{{testData5}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios';
export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return {
      testData: '',
      testData2: 'I work just fine',
      testData3: '',
      testData5: ''
    }
  },
  created: function(){
    var self = this;
    this.testDate3 = 'I dont work';
    axios.get('https://jsonplaceholder.typicode.com/posts/42').then(function(response){
      //I need this one to work
      self.testData = 'I dont work either';

      self.testData5 = 'I work also';
    });
  }
}
</script>

孩子

<template>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['test_prop', 'test_prop2', 'test_prop3', 'test_prop4'],
  data() {
    return {
      comp_data: this.test_prop,
      comp_data2: this.test_prop2,
      comp_data3: this.test_prop3,
      comp_data4: this.test_prop4
    }
  },
  created: function(){
    console.log(this.test_prop);
    console.log(this.test_prop2);
    console.log(this.test_prop3);
    console.log(this.test_prop4);
  }
}
</script>

Answer 1

您的 console.log 内部 created 钩子将显示此变量在父组件中的初始状态。这是因为 Parent 的 created 钩子和 Child 的 created 钩子会同时运行。

所以，当你解决你的承诺时，子组件已经被创建了。要了解这种行为，请使用 {{ this.test_prop }} 将您的道具放入模板中。

要解决这个问题，根据您的需要，您可以为您的道具定义一些 默认值 (see) 或使用 v-if 条件渲染您的子组件。就是这样，希望对你有帮助！

Answer 2

在 Vue 创建的钩子中，只有从主组件传递的属性的初始值。因此，主组件中的后续更新（例如您的示例“在 ajax 调用之后”）不会影响子组件数据变量，因为已经发生了子 创建的钩子。
如果您想稍后以一种方式更新数据，您可以这样做：

 watch: {
    test_prop: function(newOne){
      this.comp_data = newOne;
    }
 }

在属性更改中添加 watcher 将更新主组件中属性的最后一个值。

同时编辑错字this.testDate3。我猜应该是this.testData3