在重新阅读文档并进行一些测试后，我发现将 props 作为对象传递与对象属性传递之间存在重要区别。
此页面清楚表明两者都可以，https://v2.vuejs.org/v2/guide/components-props.html#Passing-an-Object https://v2.vuejs.org/v2/guide/components-props.html#Passing-an-Object
但是，如果您传递该对象，那么您在组件中所做的任何更改也将反映在父级中。这是有道理的，根据本节底部的评论，https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow https://v2.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 模型的子级中都有双向绑定。
更新网页上的三个值，然后检查您的 Vue 开发工具以查看：
- 标量在子级中更新，但根中不更新
- 当传递一个对象并更新一个字段时，它会反映在子级和根级中
- 当对象字段作为其自己的单独属性传递时，更新会显示在子项中，而不是根中
