Prop being mutated: "counter"
对于父子组件之间的互相传值,报错如下:[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 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: “counter”
大概意思是:避免直接更改一个PROP,因为每当父组件重新呈现时,该值就会被覆盖。
解决办法:
不要直接引用父组件传过来的值,可以把接收到的父组件的值赋值给一个新的参数
父组件
<template> <div class="wrap"> <Temp :counter="counte" :max="10" :min="0" @reduceInner="reduceWrap" @addInner = 'addWrap'></Temp> </div> </template> <script> import Temp from '../components/temp' import TempA from '../components/tempA' export default { name: 'practice', components: { Temp, TempA }, data () { return { counte: 5 } }, methods: { reduceWrap(val) { this.counte = val }, addWrap(val) { this.counte = val } } } </script>
子组件
<template>
<div class="wrapInner">
<el-row>
<el-col :span="12"><el-input v-model="cum" :max="max" :min="min"></el-input></el-col>
<el-col :span="3"><el-button @click="reduce">-</el-button></el-col>
<el-col :span="3"><el-button @click="add">+</el-button></el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'temp',
props: {
counter: {
type: Number
},
max: {
type: Number
},
min: {
type: Number
}
},
data: function () {
return {
cum: this.counter
};
},
computed: {
},
methods: {
reduce() {
this.cum--;
this.$emit('reduceInner', this.cum)
},
add () {
this.cum++;
this.$emit('addInner', this.cum)
}
}
};
</script>
更多推荐
已为社区贡献24条内容
所有评论(0)