javascript - How vue template simulates the destructuring props feature in jsx

Question

We know that in jsx you can assign values ​​to props like this

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

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

In vue, although I am able to do this

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

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

But the difference from the above is that my-comp actually only receives a prop of some-props (an object attribute), instead of getting a## like jsx #, b Two props (properties with value expansion).

The difference between object properties and expanded properties is that the former is inconvenient for props verification.

If I want to achieve the same effect as jsx, I have to write like this

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

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

It’s super annoying to write like this, because you often have to write a lot of props.

Then the question is, is it possible to implement the abbreviation in jsx in vue?

Answer 1

Pay attention. Also, what about this?

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

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

Answer 2

Then write jsx in the render function instead of template? Escape