javascript - Bagaimana templat vue mensimulasikan ciri prop yang memusnahkan dalam jsx

Question

Kami tahu bahawa dalam jsx anda boleh menetapkan nilai kepada prop seperti ini

const props = {
  a: 1,
  b: 1,
}

render() {
  return (
    <MyComponent {...props} />
  )
}

Dalam vue walaupun saya mampu melakukan ini

<template>
<my-comp :some-props="props"></my-comp>
</template>

// ...
data() {
  return {
    props: {
      a: 1,
      b: 1,
    },
  },
},

Tetapi perbezaan dari di atas ialah my-comp sebenarnya hanya menerima satu some-props 的 prop， （一个对象属性），而不是像 jsx 那样，获得了 a，b dua prop (sifat dengan pengembangan nilai).

Perbezaan antara sifat objek dan sifat dikembangkan ialah sifat yang pertama menyusahkan untuk pengesahan prop.

Jika saya ingin mencapai kesan yang sama seperti jsx, saya akan menulis seperti ini

<template>
<my-comp :a="props.a" :b="props.b"></my-comp>
</template>

// ...
data() {
  return {
    props: {
      a: 1,
      b: 1,
    },
  },
},

Menulis seperti ini sangat menjengkelkan kerana anda sering perlu menulis banyak prop.

Maka persoalannya ialah, adakah mungkin untuk melaksanakan singkatan dalam jsx dalam vue?

Answer 1

Beri perhatian Juga, bagaimana dengan ini?

<template>
<my-comp :vprops="props"></my-comp> //在组件里直接用vprops.a,vprops.b
</template>

// ...
data() {
  return {
    props: {
      a: 1,
      b: 1,
    },
  },
},

Answer 2

Kemudian tulis jsx dalam fungsi render dan bukannya templat

?