所以我想将 props 传递给 Vue 组件，但我希望这些 props 将来会从该组件内部发生变化，例如当我使用 AJAX 从内部更新该 Vue 组件时。所以它们仅用于组件的初始化。

My cars-listVue 组件元素，我将具有初始属性的 props 传递给single-car:

// cars-list.vue

<script>
    export default {
        data: function() {
            return {
                cars: [
                    {
                        color: 'red',
                        maxSpeed: 200,
                    },
                    {
                        color: 'blue',
                        maxSpeed: 195,
                    },
                ]
            }
        },
    }
</script>

<template>
    <div>
        <template v-for="car in cars">
            <single-car :initial-properties="car"></single-car>
        </template>
    </div>
</template>

我现在这样做的方式是在我的内心single-car我正在分配的组件this.initialProperties to my this.data.properties on created()初始化挂钩。它有效且具有反应性。

// single-car.vue

<script>
    export default {
        data: function() {
            return {
                properties: {},
            }
        },
        created: function(){
            this.data.properties = this.initialProperties;
        },
    }
</script>

<template>
    <div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>

但我的问题是我不知道这是否是正确的方法？不会给我路上带来一些麻烦吗？或者有更好的方法吗？

多亏了这个https://github.com/vuejs/vuejs.org/pull/567 https://github.com/vuejs/vuejs.org/pull/567我现在知道答案了。

Method 1

将初始属性直接传递给数据。就像更新文档中的示例一样：

props: ['initialCounter'],
data: function () {
    return {
        counter: this.initialCounter
    }
}

但请记住，如果传递的 prop 是在父组件状态中使用的对象或数组，则对该 prop 的任何修改都将导致该父组件状态发生更改。

Warning: 不推荐这种方法。它将使你的组件变得不可预测。如果您需要从子组件设置父数据，请使用状态管理（如 Vuex）或使用“v-model”。https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Method 2

如果您的初始道具是一个对象或数组，并且您不希望子状态的更改传播到父状态，那么只需使用例如Vue.util.extend[1] 复制 props，而不是将其直接指向子数据，如下所示：

props: ['initialCounter'],
data: function () {
    return {
        counter: Vue.util.extend({}, this.initialCounter)
    }
}

Method 3

您还可以使用扩展运算符来克隆道具。伊戈尔的回答中有更多细节：https://stackoverflow.com/a/51911118/3143704 https://stackoverflow.com/a/51911118/3143704

但请记住，较旧的浏览器不支持扩展运算符，为了获得更好的兼容性，您需要转译代码，例如使用babel.

脚注

[1] 请记住，这是一个内部 Vue 实用程序，它可能会随着新版本而改变。您可能想使用其他方法来复制该道具，请参阅如何正确克隆 JavaScript 对象？ https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object.

我正在测试它的小提琴：https://jsfiddle.net/sm4kx7p9/3/ https://jsfiddle.net/sm4kx7p9/3/