在Vue.js 2中将道具作为初始数据传递的正确方法是什么？ [英] What's the correct way to pass props as initial data in Vue.js 2?
问题描述
所以我想将道具传递给Vue组件，但我希望这些道具将来会从该组件内部改变，例如当我使用AJAX从内部更新Vue组件时。因此它们仅用于组件的初始化。
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.
我的 cars-list Vue组件元素，其中我使用initial传递props物业到单车：
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>
我现在的方式是在我的单车里面/ code>组件我将 this.initialProperties 分配给 this.data.properties on created（）初始化钩子。它起作用并且是被动的。
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?
推荐答案
感谢这个 https://github.com/vuejs/vuejs.org/pull/567 我现在知道答案了。
Thanks to this https://github.com/vuejs/vuejs.org/pull/567 I know the answer now.
将初始道具直接传递给数据。与更新文档中的示例类似：
Pass initial prop directly to the data. Like the example in updated docs:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
但请记住，如果传递的prop是在父组件状态中使用的对象或数组，则对该prop的任何修改都将导致该父组件状态的更改。
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.
警告：建议不要使用此方法。它会使您的组件变得不可预测。如果需要从子组件设置父数据，请使用Vuex之类的状态管理或使用v-model。 https://vuejs.org/v2/guide/components .html #Use-v-model-on-Components
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
如果你的初始prop是一个对象或数组，如果你不希望子状态的变化传播到父状态，那么只需使用eg Vue.util.extend [1]制作道具的副本，而不是直接将其指向儿童数据，如下所示：
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)
}
}
方法3
您还可以使用spread运算符来克隆道具。 Igor回答的更多细节： https://stackoverflow.com/a/51911118/3143704
但请记住，旧浏览器不支持扩展运算符，为了更好的兼容性，您需要转换代码，例如使用 babel 。
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.
[1]请记住，这是一个内部Vue实用程序，它可能会随新版本而变化。您可能希望使用其他方法来复制该道具，请参阅如何做我正确克隆了一个JavaScript对象？。
[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?".
我在测试它的小提琴：
https://jsfiddle.net/sm4kx7p9/3/
My fiddle where I was testing it: https://jsfiddle.net/sm4kx7p9/3/
这篇关于在Vue.js 2中将道具作为初始数据传递的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
