Question

让我们说我的应用程序是一个用Vue构建的简化电子表格。关键组件包括TableCollection，Table，Row和Field。 TableCollection有一个包含多个Table个对象的数组。每个Table都有一个包含多个Row个对象的数组。每个Row都有一个包含多个Field个对象的数组。

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

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

是否还有其他因素需要考虑？例如，它是否会影响由Vue生成的getter和setter？

Answer 1

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

此页面清楚表明两者都可以，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模型的子项中都有双向绑定。

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

标量在子项中更新，但不在根
当传递对象并更新字段时，它将反映在子和
当对象字段作为其自己的单独prop进行传递时，更新将显示在子项中但不显示在根

Vue道具：我应该传递对象或其属性吗？这有什么不同吗？

1 个答案: