我們都知道props值是只讀的，子組件內不可直接修改，會報錯滴

但是很多時候這個值是需要子組件主動修改的，一般我們會使用this.$emit()去修改，但比較麻煩

下面這種方式可以實現：

1、父組件實時修改props值時，子組件可以接收到改變

2、子組件可主動修改該值

<div>{{RealValue}}</div> props: [ 'value' ], watch: { value (v) { this.RealValue = v } }, data () { return { RealValue: this.value } }

原理很簡單，就是使用一個RealValue作為實際顯示的參數，并且使用watch實時把value值傳給他

PS：這里的值是字符串格式，如果value是對象或者數組，watch處要寫成：

watch: { value:{ deep: true, handler(v) { this.RealValue = v } } },

補充知識：vue組件內數值做watch監聽，首次監聽不到的問題

在vue中會使用很多子組件，有時因為組件的類型等原因會導致數據監聽不到的情況，下面列舉幾種問題和解決方法

子組件內數據首次監聽不到時，可以使用【immediate】方法，其值是true或false；immediate:true代表如果在 wacth 里聲明了之后，就會立即先去執行里面的handler方法

watch:{ uploadImageUrl:{ immediate:true, handler:function(newval){ this.uploadShowImageUrl = newval; } }},

子組件的深度監聽函數【deep】，其值是true或false；確認是否深入監聽。deep的意思就是深入觀察，監聽器會一層層的往下遍歷，給對象的所有屬性都加上這個監聽器（受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除）

watch:{ uploadImageUrl:{ deep:true, handler:function(newval){ this.uploadShowImageUrl = newval; } }},

給組件內的props為對象的數據設置默認值

如果prop中接收的數據為對象或者數組類型，是不可以像字符串等【default:’’】直接指定default值的，會報【Invalid default value for prop “defaultProp”: Props with type Object/Array must use a factory function to return the default value.】錯誤，修正方法如下

defaultProp: { type: Object, default: function(){ return { children: ’children’, label: ’name’ } }},

以上這篇Vue將props值實時傳遞 并可修改的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。