不要直接更改组件中的道具。如果你需要改变它，设置一个新的属性，像这样:

data() {
  return {
    listClone: this.list
  }
}

并更改listClone的值。

这与这样一个事实有关:在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.js认为这是一个反模式。例如，声明和设置一些道具

this.propsVal = 'new Props Value'

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

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

这肯定有用。

下面是一个小吃店组件，当我把小吃店变量直接输入v-model，就像这样，如果将工作，但在控制台中，它会给出一个错误

避免直接改变道具，因为每当父组件重新呈现时，该值将被覆盖。相反，应该使用基于道具值的数据或计算属性。

<template>
        <v-snackbar v-model="snackbar">
        {{ text }}
      </v-snackbar>
</template>

<script>
    export default {
        name: "loader",
     
        props: {
            snackbar: {type: Boolean, required: true},
            text: {type: String, required: false, default: ""},
        },
      
    }
</script>

消除这种变异错误的正确方法是使用监测器

<template>
        <v-snackbar v-model="snackbarData">
        {{ text }}
      </v-snackbar>
</template>

<script>
/* eslint-disable */ 
    export default {
        name: "loader",
         data: () => ({
          snackbarData:false,
        }),
        props: {
            snackbar: {type: Boolean, required: true},
            text: {type: String, required: false, default: ""},
        },
        watch: { 
        snackbar: function(newVal, oldVal) { 
          this.snackbarData=!this.snackbarDatanewVal;
        }
      }
    }
</script>

在加载小吃店的主组件中，你可以执行这段代码

<loader :snackbar="snackbarFlag" :text="snackText"></loader>

这对我很有用

道具下降，事件上升。这就是Vue的模式。关键是，如果你试图变异从父母传递的道具。它不会工作，只会被父组件重复覆盖。子组件只能发出一个事件来通知父组件做某事。如果你不喜欢这些限制，你可以使用VUEX(实际上这种模式会吸收复杂的组件结构，你应该使用VUEX!)

再加上最好的答案，

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

通过数组设置道具是为了开发/原型，在生产中确保设置道具类型(https://v2.vuejs.org/v2/guide/components-props.html)，并设置一个默认值，以防道具没有被父元素填充。

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

这样你至少可以在mutableList中得到一个空对象，而不是JSON。如果未定义，则解析错误。