对于父子组件之间的互相传值,报错如下:
[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,因为每当父组件重新呈现时,该值就会被覆盖。
解决办法:
不要直接引用父组件传过来的值,可以把接收到的父组件的值赋值给一个新的参数
1 <template>
2 <div>
3 <span>子组件</span>
4 <input type="text" name="" v-model.trim="textTip">
5 <button type="button" class="btn btn-success btn-xs" v-on:click="callFather">通知父组件</button>
6 </div>
7 </template>
8 <script>
9
10
11 export default {
12 data() {
13 return {
14 textTip:this.propTextTip
15 }
16 },
17 props:['propTextTip'],
18 methods:{
19 callFather:function() {
20 //发射信号
21 console.log(this.textTip);
22 this.$emit('getCalled',this.textTip);
23 //其中 getCalled 是一个自定义的事件,功能类似于一个中转
24 }
25 }
26 }
27
28 </script>