Vue.js 2.x模板中能否使用扩展语法(...)？

你在Vue模板里直接用...options的写法是React的语法，Vue不支持这么写，浏览器会把它当成无效的HTML属性，所以抛出Failed to execute 'setAttribute' on 'Element': '...options' is not a valid attribute name.的错误。

Vue里要实现批量传递组件属性，得用**v-bind的对象绑定语法**，把整个属性对象传给v-bind即可。

修正后的代码 #

<template>
  <vxe-table>
    <vxe-column
      v-for="options in someConsts"
      v-bind="options"
      width="160">
    </vxe-column>
  </vxe-table>
</template>

关键细节说明 #

• 如果options对象里已经包含width属性，后面显式写的width="160"会覆盖对象里的对应值——Vue的规则是显式绑定的属性优先级高于v-bind对象中的属性。
• 这种写法适用于所有Vue组件，不管是原生组件还是第三方组件（比如这里的vxe-column），只要是组件声明接受的props，都能通过v-bind="对象"批量传递。

内容的提问来源于stack exchange，提问作者cmal