javascript - vue 使用花括号包裹 prop 的时候，为什么会被转译成 JSON 字符串？

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>

如示例代码，sider 接收到的 labels 这个 prop，其值是 '[1, 2, 3, 4]', 即 data.labels 的 JSON 字符串形式？

请问，为什么允许这样的转译呢？它主要是用于什么场景下？

Answer 1

这个属于es6写法
相当于
<sider :labels="{labels:labels}"></sider>