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

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

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

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

2、子組件可主動(dòng)修改該值

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

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

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

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

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

在vue中會(huì)使用很多子組件，有時(shí)因?yàn)榻M件的類型等原因會(huì)導(dǎo)致數(shù)據(jù)監(jiān)聽(tīng)不到的情況，下面列舉幾種問(wèn)題和解決方法

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

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

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

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

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

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

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

以上這篇Vue將props值實(shí)時(shí)傳遞 并可修改的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。