vue 父组件循环一个数组对象，循环出的对象传到子组件，子组件如何监听传来的对象

在父组件中使用 v-bind 将对象传递给子组件，在子组件中使用 props 接收该对象。如果想要监听父组件传递过来的对象，可以在子组件中使用 watch 监听 props 的变化。示例代码如下：

父组件：

<template>
  <div>
    <child-component v-for="item in items" :data="item" :key="item.id" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' },
      ]
    }
  },
}
</script>

子组件：

<template>
  <div>
    <p>{{ data.name }}</p>
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        console.log('data changed:', newVal)
      },
      deep: true
    }
  }
}
</script>

在子组件中使用 watch 监听 props 的变化，当父组件传递的对象发生变化时，就会触发 watch 中的处理函数，从而实现监听。需要注意的是，需要将 watch 的 deep 属性设置为 true，才能够深度监听对象的变化。