假设我的应用程序是在 Vue 中构建的精简电子表格。关键组件是TableCollection、Table、Row 和Field。 TableCollection 有一个包含多个 Table 对象的数组。每个Table 都有一个包含多个Row 对象的数组。每个Row 都有一个包含多个Field 对象的数组。
在表格模板中使用行组件时，我可以绑定单个行属性 (:row="row")，或者我可以为每列绑定一个单独的属性 (:col1="col1" :col2="col2" :col3="col3")。哪种方法是首选方法，为什么？
传递单个属性不太冗长，但从行组件中引用它更冗长，因此它们（大致）相互抵消。单一属性的一个优点是我可以通过推送到数组来动态添加一个字段。
还有其他需要考虑的因素吗？例如，它会影响 Vue 生成的 getter 和 setter 吗？
【问题讨论】：
标签： vue.js vue-component
在重新阅读文档并进行一些测试后，我发现将道具作为对象传递与对象属性之间存在重要区别。
这个页面很清楚，要么可以，https://vuejs.org/v2/guide/components-props.html#Passing-an-Object
但是，如果您传递对象，那么您在组件中所做的任何更改也将反映在父组件中。这是有道理的，根据本节底部的评论，https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
上面写着：
请注意，JavaScript 中的对象和数组是通过引用传递的，因此如果 prop 是数组或对象，则在子组件内改变对象或数组本身会影响父状态。
为了证明这一点，您将以下代码放在一个 html 页面中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.component('propTest', {
props : ['scalar', 'object', 'other'],
template: `<div>Scalar is <input type="text" v-model="scalar"><br>
Object field 1 is <input type="text" v-model="object.field1"><br>
Object field 2 is <input type="text" v-model="other"></div>`
});
var app = new Vue({
el: '#app',
data: {
scalarVal : 'SCALAR',
objectVal : {
field1 : 'FIELD ONE',
field2 : 'FIELD TWO'
}
},
template : '<div><prop-test :scalar="scalarVal" :object="objectVal" :other="objectVal.field2"></prop-test></div>'
})
</script>
</body>
</html>
如您所见，它向子级传递了三个道具：一个标量值、一个对象和一个标量值的对象属性。它们在每个 v-model 的子节点中都有双向绑定。
更新网页上的三个值，然后检查您的 Vue 开发工具以查看：
【讨论】：