javascript - 如何像 React 中的 {...props} 一样在 Vue 中解构 props?
问题描述
在 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
指令将对象的所有属性绑定为道具:
<svg>
<circle v-bind="circle"> </circle>
</svg>
推荐阅读
- javascript - Javascript 中的 window.setInterval 不会多次运行一个函数
- regex - xpath+ 正则表达式:匹配文本
- list - 如何用特定条件替换列表项值?
- arcgis - 点属性表内的多边形名称
- symfony - 更改路线加载顺序的最佳方法
- python - 如何在 SQLAlchemy 中编写多个组件嵌套连词约束
- ubuntu - 如何修复 Ubuntu 18.04 上的 Gap 安装?
- regex - NotePad++ 的正则表达式帮助
- c# - 编译错误“找不到类型或命名空间名称”但可通过代码中的智能感知自动完成?
- javascript - 如何在 CodeIgniter JavaScript 文件中启用多语言功能?