Question

父母

export default {
  name: "App",
  components: {ChildComponent},
  data: function() {
    return {
      itemList: []
    };
  },
  methods: {
    fetchData() {
      callApi().then(res => { this.itemList= res; })
    }
  }
};

<template>
      <ol>
        <template v-for="(item) in itemList">
          <li :key="item.id">
            <child-component :item="item"></card>
          </li>
        </template>
      </ol>
</template>

孩子

export default {
  name: "ChildComponent",
  props: {
    item: { type: Object }
  },
  data: function() {
    const {
      name,
      address,
      .......
    } = this.item;
    return {
      name,
      address,
      ......
    };
  },
};
</script>

孩子得到道具道具，这是一个物体。

我很困惑为什么itemList指向另一个数组，但是子级没有更新？

是因为密钥不变吗？（但其他数据已更改。。）

谢谢

Answer 1

这是因为您的代码的这一部分：

const {
  name,
  address,
} = this.item;
return {
  name,
  address,
};

它的作用是从项目中复制name和address并返回它们。创建组件时，它仅在您的代码中发生一次。如果之后更改了道具item，则您的数据不会复制，而仍会返回第一个值。

解决方案：如果您未在子组件中更改name或address，则只需使用道具

this.item.name（在脚本中）或{{ item.name }}（在模板中）

它已经是反应性的，因此您的组件将在prop更改时进行更新。

Answer 2

这是因为data函数在创建组件时仅被调用一次。

获取依赖于其他数据的数据的推荐方法是使用computed。

export default {
  name: "ChildComponent",
  props: {
    item: { type: Object }
  },
  computed: {
    name() {
      return this.item.name;
    },
    address() {
      return this.item.address;
    }
  }
};

https://vuejs.org/v2/guide/computed.html#Basic-Example

Answer 3

不确定您在子组件中做什么，但这已经足够了并且应该对父组件的更改做出反应。基本上，这个想法是使用道具。我也做了一些调整。

const

为什么vue v-for在数据更改时不重新呈现子组件？

3 个答案: