javascript - Comment le modèle Vue simule la fonctionnalité d'accessoires de déstructuration dans JSX

Question

Nous savons que dans jsx, vous pouvez attribuer des valeurs à des accessoires comme celui-ci

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

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

En vue, je suis capable de le faire

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

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

Mais la différence par rapport à ce qui précède est que my-comp ne reçoit en réalité qu'un some-props 的 prop， （一个对象属性），而不是像 jsx 那样，获得了 a，b deux accessoires (propriétés à valeur étendue).

La différence entre les propriétés d'objet et les propriétés développées est que les premières ne sont pas pratiques pour la vérification des accessoires.

Si je veux obtenir le même effet que jsx, j'écrirai comme ça

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

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

Écrire comme ça est super ennuyeux car il faut souvent écrire beaucoup d'accessoires.

Alors la question est : est-il possible d'implémenter l'abréviation dans jsx dans vue ?

Answer 1

Faites attention. Et qu’en est-il de cela ?

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

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

Answer 2

Alors écrivez jsx dans la fonction de rendu au lieu du modèle Escape

 ?