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>