正文
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: "propTextTip"
大概意思是：避免直接更改一个PROP，因为每当父组件重新呈现时，该值就会被覆盖。
解决办法：
不要直接引用父组件传过来的值，可以把接收到的父组件的值赋值给一个新的参数
<template>
<div>
<span>子组件</span>
<input type="text" name="" v-model.trim="textTip">
<button type="button" class="btn btn-success btn-xs" v-on:click="callFather">通知父组件</button>
</div>
</template>
<script> export default {
data() {
return {
textTip:this.propTextTip
}
},
props:['propTextTip'],
methods:{
callFather:function() {
//发射信号
console.log(this.textTip);
this.$emit('getCalled',this.textTip);
//其中 getCalled 是一个自定义的事件，功能类似于一个中转
}
}
} </script>
