在 Vue.js 2 中将 props 作为初始数据传递的正确方法是什么? [英] What's the correct way to pass props as initial data in Vue.js 2?

问题描述

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

我的 cars-list Vue 组件元素，我将带有初始属性的 props 传递给 single-car:

//汽车列表.vue<脚本>导出默认{数据:函数(){返回 {汽车: [{红色'，最大速度:200，},{颜色:'蓝色'，最大速度:195，},]}},}<模板><div><模板 v-for="汽车中的汽车"><single-car :initial-properties="car"></single-car>

我现在这样做的方式是在我的 single-car 组件中，我将 this.initialProperties 分配给我的 this.data.properties 在 created() 初始化钩子上.它有效并且是被动的.

//单车.vue<脚本>导出默认{数据:函数(){返回 {特性: {}，}},创建:函数(){this.data.properties = this.initialProperties;},}<模板><div>汽车位于 {{properties.color}} 并且最大速度为 {{properties.maxSpeed}}</div>

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

解决方案

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

方法一

将初始道具直接传递给数据.就像更新文档中的示例:

props: ['initialCounter'],数据:函数(){返回 {计数器:this.initialCounter}}

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

警告:不推荐使用此方法.它会使您的组件变得不可预测.如果您需要从子组件设置父数据，请使用状态管理(如 Vuex)或使用v-model".https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

方法二

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

props: ['initialCounter'],数据:函数(){返回 {计数器:Vue.util.extend({}, this.initialCounter)}}

方法 3

您还可以使用扩展运算符来克隆道具.Igor 回答中的更多详细信息:https://stackoverflow.com/a/51911118/3143704

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

脚注

[1] 请记住，这是一个内部 Vue 实用程序，它可能会随着新版本而改变.您可能想使用其他方法来复制该道具，请参阅How do我正确地克隆了一个 JavaScript 对象?".

我测试的小提琴:https://jsfiddle.net/sm4kx7p9/3/

So I want to pass props to an Vue component, but I expect these props to change in future from inside that component e.g. when I update that Vue component from inside using AJAX. So they are only for initialization of component.

My cars-list Vue component element where I pass props with initial properties to 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>

The way I do it right now it that inside my single-car component I'm assigning this.initialProperties to my this.data.properties on created() initialization hook. And it works and is reactive.

// 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>

But my problem with that is that I don't know if that's a correct way to do it? Won't it cause me some troubles along the road? Or is there a better way to do it?

解决方案

Thanks to this https://github.com/vuejs/vuejs.org/pull/567 I know the answer now.

Method 1

Pass initial prop directly to the data. Like the example in updated docs:

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

But have in mind if the passed prop is an object or array that is used in the parent component state any modification to that prop will result in the change in that parent component state.

Warning: this method is not recommended. It will make your components unpredictable. If you need to set parent data from child components either use state management like Vuex or use "v-model". https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Method 2

If your initial prop is an object or array and if you don't want changes in children state propagate to parent state then just use e.g. Vue.util.extend [1] to make a copy of the props instead pointing it directly to children data, like this:

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

Method 3

You can also use spread operator to clone the props. More details in the Igor answer: https://stackoverflow.com/a/51911118/3143704

But have in mind that spread operators are not supported in older browsers and for better compatibility you'll need to transpile the code e.g. using babel.

Footnotes

[1] Have in mind this is an internal Vue utility and it may change with new versions. You might want to use other methods to copy that prop, see "How do I correctly clone a JavaScript object?".

My fiddle where I was testing it: https://jsfiddle.net/sm4kx7p9/3/

这篇关于在 Vue.js 2 中将 props 作为初始数据传递的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！