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将在Parent组件中显示此变量的初始状态。这是因为父级创建的钩子和子级创建的钩子将同时运行。

因此，当您兑现承诺时，就已经创建了子组件。要了解这种行为，请使用{{ this.test_prop }}将道具放在模板中。

要解决此问题，您可以根据自己的需要，为道具定义一些默认值（see）或使用 {{3 }}条件。就是这样，希望对您有所帮助！

Answer 2

在Vue上创建的仅挂接从主要组件传递的属性的初始值。因此，主要组件中的更高版本更新（例如您的示例“ ajax调用后”）将不会影响子组件数据变量，因为已经发生了子创建的挂钩。
如果您想稍后更新数据，可以采用以下方法：

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

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

还要编辑错字this.testDate3。我猜它一定是this.testData3

在Vue中异步调用后将数据传递给prop

2 个答案: