javascript – Wie die Vue-Vorlage die Destrukturierungs-Requisiten-Funktion in jsx simuliert

Question

Wir wissen, dass Sie in jsx solchen Requisiten Werte zuweisen können

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

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

In Vue schaffe ich das allerdings

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

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

Aber der Unterschied zum oben Gesagten besteht darin, dass my-comp tatsächlich nur ein some-props 的 prop， （一个对象属性），而不是像 jsx 那样，获得了 a，bzwei Props (werterweiterte Eigenschaften) erhält.

Der Unterschied zwischen Objekteigenschaften und erweiterten Eigenschaften besteht darin, dass erstere für die Überprüfung von Requisiten unpraktisch sind.

Wenn ich den gleichen Effekt wie jsx erzielen möchte, schreibe ich so

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

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

So zu schreiben ist super nervig, weil man oft viele Requisiten schreiben muss.

Dann stellt sich die Frage: Ist es möglich, die Abkürzung in jsx in vue zu implementieren?

Answer 1

关注一下，另外，这样呢？

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

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

Answer 2

那就在render函数写jsx 不要写template? 逃