许多属性或属性对象：选择标准

使用Vue，我们可以开发各种类型和使用条件的组件。 任何组件的关键部分之一就是其接口。 在Vue中，传递的属性是组件接口中非常重要的部分，即使不是最重要的部分。

在组件需要大量数据的情况下，可以采用几种传输它们的方法。 考虑他们。

属性集

一种可能的方法是为每个原子值创建一个单独的属性。 让我们使用类似的方法查看组件代码：

模式

<template> <div> <div>First name: {{ firstName }}</div> <div>Last name: {{ lastName }}</div> <div>Birth year: {{ birthYear }}</div> </div> </template> 

剧本

 const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { firstName: { type: String, required: true, validator: firstName => firstName !== '' }, lastName: { type: String, required: true, validator: lastName => lastName !== '' }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() } } } 

让我们看一下该组件的用法。

  <!-- Other part of html template--> <PersonInfo first-name="Jill" last-name="Smith" :birth-year="2000" /> <!-- Other part of html template--> 

考虑这种方法的优缺点

好处

• 所有属性都是独立的。 如果其中一个值无效，则错误消息将更加准确。
• 转让财产的内容显然是
• “扁平比嵌套好”
• 添加新的可选属性非常容易：只需添加使用default参数的属性

 props: { firstName: { type: String, required: true, }, lastName: { type: String, required: true, }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() }, city: { type: String, default: 'New York' } } 

缺点

• 父组件中有足够的详细代码，尤其是当数据是从单个对象获取时。 一个例子：

  <!-- Other part of html template--> <PersonInfo :first-name="person.firstName" :last-name="person.lastName" :birth-year="person.birthYear" /> <!-- Other part of html template--> 

• 详细定义属性（与对象的描述相比）

对象属性

在某些情况下，原子数据不是原始类型。 在给定的示例中，此类数据可以是person对象。

考虑一个例子：

模式

 <template> <div> <div>First name: {{ person.firstName }}</div> <div>Last name: {{ person.lastName }}</div> <div>Birth year: {{ person.birthYear }}</div> </div> </template> 

剧本

 import quartet from 'quartet' // npm validation package const v = quartet() const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { person: { type: Object, required: true, validator: v({ firstName: 'string', lastName: 'string', birthYear: v.and( 'safe-integer', v.min(MIN_BIRTH_YEAR), v.max(new Date().getFullYear()) ) }) } } } 

让我们看一下使用：

  <!-- Other part of html template--> <PersonInfo :person="person"/> <!-- or (bad) --> <PersonInfo :person="{ firstName: 'Jill', lastName: 'Smith', birthYear: 2000 }"/> <!-- Other part of html template--> 

考虑优点和缺点

好处

• 父组件中的代码变短
• 如果存在某个不变的数据结构，则代码将减少冗余

缺点

• 所有值都由一个对象绑定。 如果其中一个值无效-错误消息将指示整个对象无效
• 在父组件中使用对象时：传输数据的内容隐藏在该对象的抽象后面
• 组件中的另一层嵌套
• 无法在对象内部添加带有值的新可选属性（我不知道该怎么做）
• 要在相同程度上验证对象，您需要使用其他验证工具（例如， quartet验证库）

结论

我得出以下结论：

• 使用个体性质是更优选的。
• 当此对象的数据结构没有补充具有默认值的其他可选字段时，则允许使用对象属性。

压力

我很高兴知道您的选择标准。 您使用什么方法，为什么？ 在其他方面，这是撰写本文的主要目的。 你们中的任何人都可以了解最佳做法及其依据吗？ 多谢您的宝贵时间。

更新19:26，01/16/2019

还有第三种选择，c v-bind。 在这里查看讨论