javascript - 如何像 React 中的 {...props} 一样解构 Vue 中的 props？

Question

在 React 中我可以像这样解构 props:

function MyComponent() {
  const myProp = {
    cx: '50%',
    cy: '50%',
    r: '45%',
    'stroke-width': '10%'
  }
  return ( 
    <svg>
      <circle {...myProp}> </circle>
    </svg>
  )
}

我怎样才能在 Vue 中做同样的事情？我当前在 VueJS 中的详细版本如下:

<svg>
  <circle :cx="circle.cx" :cy="circle.cy" :r="circle.r" :stroke-width="circle.strokeWidth"> </circle>
</svg>

computed: {
  circle() {
    return {
      cx: '50%',
      cy: '50%',
      r: '45%',
      strokeWidth: '10%'
    }
  }
}

React 中可运行的代码片段:https://jsfiddle.net/as0p2hgw/
Vue 中的可运行代码片段:https://jsfiddle.net/zsd42uve/

Answer 1

您可以使用v-bind指令将对象的所有属性绑定(bind)为props:

<svg>
  <circle v-bind="circle"> </circle>
</svg>