Vue에서 props 값을 실시간으로 전달하고 수정할 수 있는 작업

우리 모두는props값이 읽기만 하는 것을 알고 있으며, 하위 구성 요소 내에서 직접 수정할 수 없으며, 오류가 발생할 수 있습니다
그러나 이 값은 하위 구성 요소가 자발적으로 수정해야 하는 경우가 많습니다. 일반적으로this.$를 사용합니다.emit () 수정하러 가는데 좀 귀찮아요.
다음과 같은 방식으로 구현할 수 있습니다.
1. 부모 구성 요소가 실시간으로 props 값을 수정할 때 하위 구성 요소는 변경을 받을 수 있다
2. 서브어셈블리가 이 값을 능동적으로 수정할 수 있음

<div>{{RealValue}}</div>

 props: [ "value" ],
 watch: {
 value (v) {
  this.RealValue = v
 }
 },
 data () {
 return {
  RealValue: this.value
 }
 }

원리는 매우 간단하다. 바로 RealValue를 실제 디스플레이 매개 변수로 사용하고 watch를 사용하여 실시간으로 값 값을 그에게 전달하는 것이다
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 "default Prop": 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 값을 실시간으로 전달하고 수정할 수 있는 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분에게 참고가 될 수 있고 저희를 많이 사랑해 주시기 바랍니다.