数组作为Vue.js组件的prop？

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>

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