[Vue warn]: Avoid mutating a prop directly since the value will be overwritten
使用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
·
使用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。
更多推荐
已为社区贡献7条内容
所有评论(0)