下面是一个小吃店组件，当我把小吃店变量直接输入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模式是向下的道具和向上的事件。这听起来很简单，但在编写定制组件时很容易忘记。

从Vue 2.2.0开始，您可以使用v-model(带有计算属性)。我发现这种组合可以在组件之间创建一个简单、干净和一致的接口:

传递给组件的任何道具都保持响应性(即，它不是克隆的，也不需要监视函数在检测到更改时更新本地副本)。 更改会自动发出到父节点。 可以与多级组件一起使用。

计算属性允许分别定义setter和getter。这允许Task组件被重写如下:

Vue.component('Task', {
    template: '#task-template',
    props: ['list'],
    model: {
        prop: 'list',
        event: 'listchange'
    },
    computed: {
        listLocal: {
            get: function() {
                return this.list
            },
            set: function(value) {
                this.$emit('listchange', value)
            }
        }
    }
})  

model属性定义了哪个道具与v-model相关联，以及在发生更改时将触发哪个事件。然后你可以从父组件中调用这个组件，如下所示:

<Task v-model="parentList"></Task>

listLocal计算属性在组件中提供了一个简单的getter和setter接口(可以把它看作一个私有变量)。在# Task -template中，你可以呈现listLocal，它将保持响应性(即，如果parentList发生变化，它将更新Task组件)。你也可以通过调用setter来改变listLocal(例如this。listLocal = newList)，它将把更改发送给父类。

这种模式的优点在于，您可以将listLocal传递给Task的子组件(使用v-model)，并且来自子组件的更改将传播到顶层组件。

例如，假设我们有一个单独的EditTask组件，用于对任务数据进行某种类型的修改。通过使用相同的v-model和计算属性模式，我们可以将listLocal传递给组件(使用v-model):

<script type="text/x-template" id="task-template">
    <div>
        <EditTask v-model="listLocal"></EditTask>
    </div>
</script>

如果EditTask发出更改，它将适当地调用listLocal上的set()，从而将事件传播到顶层。类似地，EditTask组件也可以使用v-model调用其他子组件(比如表单元素)。

Vue.js的道具不能被改变，因为这被认为是Vue中的反模式。

您需要采取的方法是在组件上创建一个引用list的原始prop属性的data属性

props: ['list'],
data: () {
  return {
    parsedList: JSON.parse(this.list)
  }
}

现在传递给组件的列表结构通过组件的data属性被引用和改变:-)

如果您希望做的不仅仅是解析列表属性，那么请使用Vue组件的computed属性。 这允许你对你的道具做出更深入的变化。

props: ['list'],
computed: {
  filteredJSONList: () => {
    let parsedList = JSON.parse(this.list)
    let filteredList = parsedList.filter(listItem => listItem.active)
    console.log(filteredList)
    return filteredList
  }
}

上面的示例将解析您的列表道具，并将其过滤为仅活跃的list-tems，将其记录为schnitts和giggles并返回它。

注意:数据和计算属性在模板中引用相同

<pre>{{parsedList}}</pre>

<pre>{{filteredJSONList}}</pre>

很容易认为计算属性(作为一个方法)需要被调用…它不

因为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 }

根据VueJs 2.0，您不应该改变组件内部的道具。它们只会被父母变异。因此，您应该在数据中定义不同名称的变量，并通过观察实际的道具来更新它们。 如果列表道具被父元素更改，您可以解析它并将其分配给mutableList。这里有一个完整的解决方案。

Vue.component('task', {
    template: ´<ul>
                  <li v-for="item in mutableList">
                      {{item.name}}
                  </li>
              </ul>´,
    props: ['list'],
    data: function () {
        return {
            mutableList = JSON.parse(this.list);
        }
    },
    watch:{
        list: function(){
            this.mutableList = JSON.parse(this.list);
        }
    }
});

它使用mutableelist来呈现模板，这样就可以在组件中保证列表道具的安全。

您不应该在子组件中更改props的值。 如果你真的需要改变它，你可以使用.sync。 就像这样

<您的组件:list.sync = "列表" > < /组件>

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