数组作为 Vue.js 组件的道具？

Question

我有一个名为“字段”的美化输入组件，我在其中声明了许多道具，因此：

 props: ['value','cols','label','group','name']

鉴于这实际上是一个花哨的输入包装器，我可能还想传入很多其他属性，例如“占位符”。我真的不想在 props 中声明所有这些（当然，列表足够有限，可以这样做）。我更喜欢做的是传递一个数组，可能称为“attrs”，它可以包含任意一组属性。现在我知道可以做到这一点，但我的问题是如何从父级中创建它？我可以使用以下内容（尽管显然需要绑定）吗？

 <field :attrs="['placeholder':'Whatever','length':42]"></field>

Answer 1

这是一个对象而不是数组，是的，可以将对象作为道具传递。只需在父组件数据对象中设置值，即

data() {
  return {
    attributes: { 
      placeholder: 'Whatever',
      length: 42,
    },
    ...
  }
}

并将其绑定为您的道具：

<field :attrs="attributes"></field>

---

澄清一下 - 可以直接在模板中设置对象/数组等，然后 vue 的模板解析器将设置相关道具的值，即

<field :attrs="[{ name: 'foo' }, { name: 'bar' }]"></field>

但这不是最佳做法，因为您的模板很快就会变得混乱，而且很难确定数据的设置位置。相反，建议您将此数据抽象为组件上的参数并将该参数绑定到 prop - 如上所述。