在 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/
最佳答案
您可以使用v-bind
指令将对象的所有属性绑定(bind)为props:
<svg>
<circle v-bind="circle"> </circle>
</svg>
关于javascript - 如何像 React 中的 {...props} 一样解构 Vue 中的 props?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59217080/