Vue props：我应该传递对象还是它的属性？它有很大的不同吗？

Question

Vue props：我应该传递对象还是它的属性？它有很大的不同吗？

假设我的应用程序是一个用 Vue 构建的精简电子表格。主要组成部分是TableCollection，Table，Row和Field。的TableCollection具有与多个阵列Table对象。每个Table都有一个包含多个Row对象的数组。每个Row都有一个包含多个Field对象的数组。

在表模板中使用行组件时，我可以绑定单个行属性 ( :row="row")，或者我可以为每列绑定一个单独的属性 ( :col1="col1" :col2="col2" :col3="col3")。哪种方法是首选方法，为什么？

传递单个属性不那么冗长，但从行组件中引用它更冗长，因此它们（大致）相互抵消。单一属性的一个优点是我可以通过推送到数组来动态添加一个字段。

还有其他因素需要考虑吗？比如对Vue生成的getter和setter有影响吗？

Answer 1

Kim*_*nce 8

在重新阅读文档并进行了一些测试后，我发现将 props 作为对象与对象属性传递之间存在重要区别。

此页面清楚地表明两者都可以，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>

Run Code Online (Sandbox Code Playgroud)

如您所见，它向子对象传递了三个道具：一个标量值、一个对象和一个作为标量值的对象属性。它们在每个 v-model 的孩子中都有双向绑定。

更新网页上的三个值，然后检查您的 Vue 开发工具以查看：

标量在孩子中更新，但不是根
当一个对象被传递，并且一个字段被更新时，它会反映在child和root中
当对象字段作为它自己单独的道具传递时，更新显示在子级而不是根级中

归档时间：	7 年，9 月前
查看次数：	4254 次
最近记录：	7 年，9 月前