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，由於每當父組件從新呈現時，該值就會被覆蓋。

 

解決辦法：

不要直接引用父組件傳過來的值，能夠把接收到的父組件的值賦值給一個新的參數

 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>