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

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

下面這種方式可以實現(xiàn)：

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

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

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

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

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

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

補(bǔ)充知識：vue組件內(nèi)數(shù)值做watch監(jiān)聽，首次監(jiān)聽不到的問題

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

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

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

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

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

給組件內(nèi)的props為對象的數(shù)據(jù)設(shè)置默認(rèn)值

如果prop中接收的數(shù)據(jù)為對象或者數(shù)組類型，是不可以像字符串等【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值實時傳遞 并可修改的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。