Vue 道具:我应该传递对象还是它的属性?它有很大的不同吗? [英] Vue props: Should I pass the object or its properties? Does it make much difference?
问题描述
假设我的应用程序是一个用 Vue 构建的精简电子表格.关键组件是TableCollection、Table、Row 和Field.TableCollection 有一个包含多个 Table 对象的数组.每个 Table 都有一个包含多个 Row 对象的数组.每个 Row 都有一个包含多个 Field 对象的数组.
Lets say my application is a cut-down spreadsheet built in Vue. The key components are TableCollection, Table, Row and Field. The TableCollection has an array with multiple Table objects. Each Table has an array with multiple Row objects. Each Row has an array with multiple Field objects.
在表格模板中使用行组件时，我可以绑定单个行属性 (:row="row")，或者我可以为每列绑定一个单独的属性 (:col1="col1" :col2="col2" :col3="col3").哪种方法是首选方法，为什么?
When using the row component in the table template I could bind a single row property (:row="row"), or I could bind a separate property for each column (:col1="col1" :col2="col2" :col3="col3"). Which is the preferred approach, and why?
传递单个属性不那么冗长，但从行组件中引用它更冗长，因此它们(大致)相互抵消.单一属性的一个优点是我可以通过推送到数组来动态添加一个字段.
Passing a single property is less verbose, but referring to it from within the row component is more verbose, so they (roughly) cancel each other out. One advantage of the single property is that I could then add a Field dynamically by pushing to the array.
还有其他因素需要考虑吗?比如对Vue生成的getter和setter有影响吗?
Are there other factors to consider? For example, does it affect the getters and setters generated by Vue?
推荐答案
在重新阅读文档并做了一些测试后，我发现将 props 作为对象传递与对象属性传递之间存在重要区别.
After re-reading the documentation and doing some tests, I found that there is an important difference between passing the props as an object versus object properties.
此页面清楚地表明两者都可以，https://vuejs.org/v2/guide/components-props.html#Passing-an-Object
This page makes is clear that either is OK, https://vuejs.org/v2/guide/components-props.html#Passing-an-Object
但是，如果您传递对象，那么您在组件中所做的任何更改也将反映在父级中.这是有道理的，根据本节底部的评论，https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
If you pass the object however, then any changes you make in the component will be reflected in the parent too. This makes sense, per the comment at the bottom of this section, https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
内容如下:
注意 JavaScript 中的对象和数组是通过引用传递的，所以如果 prop 是一个数组或对象，在子组件内部改变对象或数组本身会影响父状态.
Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect parent state.
为了证明这一点，您将以下代码放入一个 html 页面:
To prove this, you put the following code in a html page:
<!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 的 child 中都有双向绑定.
As you can see, it three props are passed to the child: a scalar value, an object, and an object property which is a scalar value. They all have two-way bindings in the child per v-model.
更新网页上的三个值，然后检查您的 Vue 开发工具以查看:
Update the three values on the web page then check your Vue dev tools to see that:
- 标量在子级中更新，但在根中未更新
- 当一个对象被传递，一个字段被更新时，它会同时反映在子和根中
- 当对象字段作为它自己单独的 prop 传递时，更新显示在子级而不是根级
这篇关于Vue 道具:我应该传递对象还是它的属性?它有很大的不同吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
