Question

我有一个名为'field'的美化输入组件，其中我声明了许多道具，因此：

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

鉴于这对于输入实际上是一个奇特的包装器，我可能还想传递其他一些属性，例如“占位符”。我真的不想在道具中声明所有这些（虽然列表足够有限，当然可以这样做）。我更喜欢做的是传递一个数组，也许叫做'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>

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

数组作为Vue.js组件的支柱？

1 个答案: