Question

我最近在使用vue道具时发现了一些奇怪的东西。我被引导相信道具具有单向数据流（父对子）。

由于某些奇怪的原因，我的道具似乎会自动发回，所以我孩子的v模型输入正在改变它所基于的父数据（类似于.sync（）行为）。这只发生在对象

中嵌套的数据数组中

例如。 images数组更新为parent，其他所有内容都没有。

编辑图像数组时为什么要更新父数据？
我不希望图像的输入影响父母，我该如何制止？

父

<template>
    <div>
        <h1>Parent Data</h1>
        <div v-if="testData">
            <p>{{testData.description}}</p>
            <p>{{testData.images[0].description}}</p>
            <p>{{testData.images[0].primary}}</p>
            <test :test="testData"></test>
        </div>
    </div>
</template>
<script>
    import test from './test.vue'

    export default {
        components: {
            test
        },
        data() {
            return {
                testData: {
                    id: 71,
                    name: "test 105",
                    identifier: "test_105",
                    description: "test description here",
                    online: 1,
                    sort_order: 1,
                    images: [
                        {
                            id: 148,
                            name: "cities",
                            description: 'image description',
                            image_directory: "images/designs/148",
                            online: null,
                            primary: true,
                            sort_order: null
                        }
                    ]
                }
            }
        }
    }
</script>

儿童

<template>
    <div>
        <h1>Child Input</h1>
        <input v-model="form.description" type="text" class="form-control" id="design-description" aria-describedby="name">
        <input v-if="form.images.length" v-model="form.images[0].description" type="text" class="form-control" id="image-description" aria-describedby="name">
        <input id="image-primary" v-if="form.images.length" v-model="form.images[0].primary" class="btn-toggle btn-toggle-round-flat" checked="true" type="checkbox">
    </div>
</template>

<script>
    export default {

        props: ['test'],
        data() {
            return {
                form: {
                    id: null,
                    name: null,
                    description: null,
                    online: true,
                    images: [],
                    catagory_ids: [],
                    fortysummers_reference: null
                },
                errors: [],
            }
        },
        mounted() {

            let activeDesign = this.test;

            this.form = {
                id: (activeDesign) ? activeDesign.id : null,
                name: (activeDesign) ? activeDesign.name : null,
                description: (activeDesign) ? activeDesign.description : null,
                online: (activeDesign) ? activeDesign.online : true,
                images: (activeDesign) ? activeDesign.images : [],
                catagory_ids: [],
                fortysummers_reference:
                    null
            }
        }
    }
</script>

Answer 1

实际上

let activeDesign = this.test; this.test的值不会复制到activeDesign，而只会引用父测试数据。你需要复制this.test的值。你可以做这样的事情 images: (activeDesign) ? [...activeDesign.images] : [], 或者使用lodash的cloneDeep函数 let activeDesign = cloneDeep(this.test);

Answer 2

请在Vuejs文档中查看此页面： https://vuejs.org/v2/guide/components.html

请注意，JavaScript中的对象和数组是通过引用传递的，因此如果prop是数组或对象，则在子项内部变换对象或数组本身会影响父状态。

要解决此问题，您可以使用clone，或者也可以将属性分解为仅发送未通过引用传递的简单类型。

更好的解决方案可能是将Vuex用作中央存储，因为问题的核心似乎是您使用父级作为主要数据引用，由于这些问题，这可能会变得棘手。使用Vuex，您可以明确控制数据。

祝你好运

Vue prop将嵌套数据自动发送到父组件

2 个答案: