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

Posted 2023-02-23

【中文标题】Vue JS - 使用异步功能时道具数据不会在孩子中更新

【英文标题】：Vue JS - props data not updating in child when using async function

【发布时间】：2022-01-13 09:59:59

【问题描述】：

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

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

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

作为一个简单的例子，我在父组件和子组件中添加了一些<p>标签作为输出数据的一种方式，这是我使用的简写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 的重点。就像我说的，我对框架比较陌生，所以我有可能犯了一个简单的错误。

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

谢谢

【参考方案1】：

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

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

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

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

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

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

【讨论】：

谢谢你，我会考虑你对架构的评论！