Vue JS - 使用异步函数时道具数据不会在子中更新

Question

我对 Vue JS 比较陌生，但感觉我对组件层次结构掌握得比较好。只是运行这里的一个问题让我有点困惑并且与我对 props 应该做什么的理解不符。

在我的父组件中，我有一个名为 loading 的 data 属性，它被初始化为 true。我还有一个名为 dataItems 的属性，它初始化为 null，但由调用 API 的异步方法填充。在成功填充 dataItems 时，loading 也应设置为 false。此 API 调用是在 mounted 函数内部进行的。

在父级一切都按预期工作，但是将这两个属性传递给子组件（通过 props）似乎只传递了它们的初始状态（分别为 true 和 null ) 并且从不更新它们。

作为一个简单的例子，我在父组件和子组件中添加了一些<p>标签作为输出数据的方式，这里是shorthand HTML和JS我用过。

父组件：

<template>
  <p>Loading: {{loading}}</p> // outputs Loading: false
  <p>dataItems: {{dataItems}}</p> //outputs JSON string
  <ChildComponent :loading="loading" :dataItems="dataItems" />
</template>

<script>
  data: function() {
    loading: true
    dataItems: null
  },
  methods: {
    getDataItems: async function() {
      //.. make API call
      this.dataItems = response.data
      loading = false
    }
  },
  mounted: function() {
    this.getDataItems()
  }
</script>

子组件：

<template>
  <p>Loading: {{loading}}</p> // outputs Loading: true
  <p>dataItems: {{dataItems}}</p> //no output
</template>

<script>
  props: ["loading", "dataItems"],
  data: function() {
    loading: this.loading
    dataItems: this.dataItems
  },
</script>

所以当父子组件一起渲染时，我看到的是这样的：

Loading: false // from parent
dataItems: {"someJsonString"} // from parent
Loading: true // from child
             //from child

我不明白为什么传递下来的数据没有更新，因为我有点理解这就是 Vue 的意义所在。就像我说的，我对这个框架还比较陌生，所以我有可能犯了一个简单的错误。

如果有人能给我指出正确的方向，我将不胜感激！

谢谢

Answer 1

您的代码是正确的，但您决定使用 props 实施的方法似乎不适合这种情况。

您（正如您提到的）正在使用 props 初始化您的 Child 状态（其数据）。当您需要从子组件更改此数据时，此方法很有用，因为您不能直接从子组件更改道具，只有父组件可以。

现在，我看到您的子组件的目的只是显示父组件发送的信息（通过 props）。因此，您可以直接从您的模板访问 refs 的道具值（它们是反应性的）。

子组件访问模板中的道具：

<template>
  <p>Loading: {{ loading }}</p>
  <p>dataItems: {{ dataItems }}</p>
</template>

<script>
  props: ["loading", "dataItems"],
  data: function() {
    // Use the props directly in your template
  },
</script>

Vue JS - 使用异步函数时道具数据不会在子中更新

Vue JS - props data not updating in child when using async function

javascript

vue.js

vue-props