Vue parent component passes object to child component

The parent component passes an object to the child component, and the child component displays it

When the child component is displayed, use v-for to traverse the object

    <div v-for="v,k in stu">
      {{k}}:{{v}}
    </div>

fa

<template>
  <div>
    <son :stu="stu"></son>
  </div>
</template>

<script>
  import son from './Son'

  export default {
    name: "father",
    data() {
      return {
        stu: {
          name: 'aaa',
          age: 16,
          class: 'cs64'
        }
      }
    },
    components: {
      son,
    }
  }
</script>

son

<template>
  <div>
    <div v-for="v,k in stu">
      {{k}}:{{v}}
    </div>
  </div>
</template>

<script>
  export default {
    name: "son",
    props: ['stu'],
  }
</script>