[Vue warn]: Avoid mutating a prop directly since the value will be overwritten

痛定思痛。 2022-06-12 08:40 177阅读 0赞

使用vue自定义组件时遇到如下错误：

[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: "pageSize"

原因是在使用组件时，传入的prop，被组件内部又做了一次修改，然后抛的异常，比如如下使用组件的代码（修改的是pageSize属性）：

<g-table ref="gTable" :columns="tableColumns"
             highlightCurrentRow
             border
             :page-size="pageSize"
             @g-table-add="handleAddClick"
             @current-change="handleCurrentChange"
             @selection-change="handleSelectionChange"
             url="http://localhost:8888/demo/testGTable"
             tooltip-effect="dark"></g-table>

data中配置pageSize=20

然后再组件中的created方法，我修改了这个属性：

created() { this.pageSize = 10; },

这种情况下就会报这个错，因为传入的prop中的值是不允许改变的。这个在vue更新后才会出现的，网上是这么说的：

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

不能更改 quantity prop使其和父组件同步 , 而是让应该这个组件提交个事件给父组件，可以 watch quantity 变量，如果变量发生改变就emit事件，所以这里压根不需要 prop。