【vue warning】avoid mutating a prop directly

[vue warning] avoid mutating a prop directly

一、问题描述

使用props，通过父组件给子组件传值，子组件在使用props中的属性时，直接对props中的属性进行了修改。修改方式为直接对props中的属性赋值，或者使用双向绑定。
父组件代码：

<categroy :course="item" />

子组件代码：

<template><div class="course-list"><dl class="categroy-dl"><dt>类别</dt><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="不限" name="不限"></el-tab-pane><el-tab-pane label="C语言" name="C语言"></el-tab-pane><el-tab-pane label="Java" name="Java"></el-tab-pane><el-tab-pane label="Python" name="Python"></el-tab-pane></el-tabs></dl></div>
</template>
<script>
export default {props: {activeName: {type: String,default: "不限"}},methods: {handleClick(tab, event) {console.log(tab, event);this.$emit("queryCoures", this.activeName);}}
};

此时会抛出警告：vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “activeName”. activeName 为Props中的一个属性名。

二、解决方法

通过警告的提示信息可知，在子组件中不可以对父组件通过props传过来的属性进行修改。我们可以使用data或者计算属性转接一下。如果需要同步修改父组件中的值，则需使用$emit调用父组件中的方法对其进行修改。
更改后子组件代码：

<template><div class="course-list"><dl class="categroy-dl"><dt>类别</dt><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="不限" name="不限"></el-tab-pane><el-tab-pane label="C语言" name="C语言"></el-tab-pane><el-tab-pane label="Java" name="Java"></el-tab-pane><el-tab-pane label="Python" name="Python"></el-tab-pane></el-tabs></dl></div>
</template>
<script>
export default {props: {categroy: {type: String,default: "不限"}},data() {// categroy不与el-tabs直接双向动态绑定，而是使用categroy为activeName赋初始值，activeName与el-tabs双向动态绑定return { activeName: this.categroy };},methods: {handleClick(tab, event) {console.log(tab, event);// 使用$emit调用父组件的方法，同步categroy的值this.$emit("queryCoures", this.activeName);}}
};

三、总结

在vue2中，直接修改prop是被视作反模式的。由于在新的渲染机制中，每当父组件重新渲染时，子组件都会被覆盖，所以应该把props看做是不可变对象。–参考文档

子组件不可直接修改props中的属性，应该emit一个事件给父组件，让父组件去处理修改。应遵守父子组件之间的传值规范。