我們都知道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
  }
 }
 }, 

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

在vue中會使用很多子組件，有時因為組件的類型等原因會導致數(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；確認是否深入監(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ù)設置默認值

如果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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論