javascript - When vue uses curly braces to wrap props, why is it translated into a JSON string?

Question

<template>
<sider :labels={labels}></sider>
</template>

<script>
import Sider from '@/components/Sider'
export default {
  name: 'Main',
  components: {
    Sider,
  },
  data() {
    return {
      labels: [1, 2, 3, 4],
    }
  }
}
</script>

As shown in the sample code, the value of labels prop received by sider is '[1, 2, 3, 4]', which is the JSON string form of data.labels?

Excuse me, why is this translation allowed? In what scenarios is it mainly used?

Answer 1

This is es6 writing method
equivalent to
<sider :labels="{labels:labels}"></sider>