我开始了https://laracasts.com/series/learning-vue-step-by-step系列。我在Vue、Laravel和AJAX的课程上停了下来,出现了这个错误:

Vue .js:2574 [Vue警告]:避免直接改变道具,因为每当父组件重新呈现时,该值将被覆盖。相反,应该使用基于道具值的数据或计算属性。道具被突变:"list"(在组件中找到)

我在main.js中有这段代码

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

我知道,当我覆盖列表道具时,问题是在created(),但我是Vue的新手,所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?


当前回答

Vue.js认为这是一个反模式。例如,声明和设置一些道具

this.propsVal = 'new Props Value'

所以为了解决这个问题,你必须从数据或Vue实例的计算属性的道具中获取一个值,就像这样:

props: ['propsVal'],
data: function() {
   return {
       propVal: this.propsVal
   };
},
methods: {
...
}

这肯定有用。

其他回答

Vue只是警告您:您更改了组件中的道具,但当父组件重新呈现时,“list”将被覆盖,您将丢失所有更改。所以这样做是危险的。

使用computed属性,如下所示:

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    computed: {
        listJson: function(){
            return JSON.parse(this.list);
        }
    }
});

我个人总是建议,如果你需要改变道具,首先将它们传递给计算属性,然后从那里返回,然后就可以很容易地改变道具,即使在那你也可以跟踪道具的突变,如果它们是从另一个组件中突变的,或者我们也可以观察。

如果你想改变道具-使用对象。

<component :model="global.price"></component>

组件:

props: ['model'],
methods: {
  changeValue: function() {
    this.model.value = "new value";
  }
}

这与这样一个事实有关:在Vue 2中,局部变异道具被认为是一种反模式

你现在应该做的是,如果你想在本地改变一个道具,在你的数据中声明一个字段,使用props值作为它的初始值,然后改变副本:

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

你可以在Vue.js官方指南上阅读更多相关内容


注1:请注意,您的道具和数据不应使用相同的名称,即:

data: function () { return { list: JSON.parse(this.list) } } // WRONG!!

注2:因为我觉得有一些关于道具和反应性的困惑,我建议你看看这个帖子

因为Vue道具是数据流的一种方式,这可以防止子组件意外地改变父组件的状态。

从Vue官方文档中,我们将找到两种方法来解决这个问题

if child component want use props as local data, it is best to define a local data property. props: ['list'], data: function() { return { localList: JSON.parse(this.list); } } The prop is passed in as a raw value that needs to be transformed. In this case, it’s best to define a computed property using the prop’s value: props: ['list'], computed: { localList: function() { return JSON.parse(this.list); }, //eg: if you want to filter this list validList: function() { return this.list.filter(product => product.isValid === true) } //...whatever to transform the list }