避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖

Question

我是vuejs的新手，正在尝试将活动数据同步到父级，但出现错误

vue.js：523 [Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“有效”（位于组件中）

我的Vuejs代码如下

<div id="app">
    <pre>
        {{$data}}
    </pre>
    <div v-for="plan in plans">
        <plan :plan="plan" :active.sync="active"></plan>
    </div>
</div>
<template id="mytemplate">
    <div>
        {{$data}}
        <span>{{plan.name}}</span>
        <span>{{plan.price}}</span>
        <button @click="setActivePlan">upgrade</button>
    </div>
</template>

<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",

        data: {
            active:this.active,
            plans: [
                {name: 'Diamond', price: '1000'},
                {name: 'Gold', price: '500'},
                {name: 'Silver', price: '250'},
                {name: 'Free', price: '0'}
            ]
        },
        components: {
            plan: {
                template: "#mytemplate",
                props: ['plan', 'active'],
                methods: {
                    setActivePlan: function () {
                        this.active = this.plan
                    }
                }
            }
        }

    });
</script>

谁能帮我解决这个问题

Answer 1

正如错误所暗示的那样，您正在尝试更改道具之一active。

道具被突变：“有效”（位于组件中）

由于道具是从父级动态发送的，因此每当父级更改道具时它们就会更改，如果您也在子级中更改道具，则会产生冲突，这就是为什么您会收到此错误。

作为文档：

亲子关系可以概括为道具下降，事件上升。父级通过道具将数据传递给子级，而子级则通过事件将消息发送给父级。

因此，执行此操作的正确方法是发出一个事件，该事件将在parent中调用一个方法并active在定义它的parent中更改该变量。以下是代码更改：

<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",

        data: {
            active:this.active,
            plans: [
                {name: 'Diamond', price: '1000'},
                {name: 'Gold', price: '500'},
                {name: 'Silver', price: '250'},
                {name: 'Free', price: '0'}
            ]
        },
        methods: {
           setActivePlan: function (plan) {
              this.active = plan
           }
        } 
        components: {
            plan: {
                template: "#mytemplate",
                props: ['plan', 'active'],
                methods: {
                    setActivePlan: function () {
                        this.$emit('setActivePlan', this.plan)
                    }
                }
            }
        }

    });
</script>