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

原理很簡單，就是使用一個(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)聽，首次監(jiān)聽不到的問題

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

子組件內(nèi)數(shù)據(jù)首次監(jiān)聽不到時(shí)，可以使用【immediate】方法，其值是true或false；immediate:true代表如果在 wacth 里聲明了之后，就會(huì)立即先去執(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)聽器會(huì)一層層的往下遍歷，給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽器（受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對(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í)傳遞 并可修改的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論