Angular 및 vue3에서 하위 구성 요소 속성의 변경을 감지하고 변경된 값을 로컬 범위 변수에 할당하는 방법.

당신은 나를 지원할 수 있습니다

Angular와 vue3 모두 속성 바인딩을 사용하여 부모 구성 요소와 자식 구성 요소 간에 더 나은 통신 방법을 제공합니다. 다음을 따르는 것이 일반적입니다not manipulate child property object direcetly, rather we detect changes of child property and assign changed data to local component variable, and after that manipulate data inside component using local component variable..

각도에서
자식 구성 요소 내에서 속성 바인딩을 선언하기 위해 Angular는 데코레이터를 제공합니다@Input(). @Input() 데코레이터를 사용하면 하위 구성 요소의 속성 값에 액세스할 수 있으며 상위 구성 요소는 [] 속성 바인딩 데이터를 사용하여 바인딩된 데이터를 하위 구성 요소로 다시 전달해야 합니다.

// inside parent html.
<child [childProp] = "data" />

// inside child component.
@Input() childProp: unknown; 

Vue3에서는
자식 구성 요소 내에서 속성 바인딩을 선언하기 위해 Vue3는 props: { } 를 제공하며, props 객체 내에서 모든 속성 변수를 선언합니다.:props 구문을 사용하여 부모 구성 요소 내부에서 속성 바인딩을 전달합니다.

// inside parent template
<Child :childProp = "data" />

//inside child component
props:{
     childProp: Array
}

이제 각도와 vue3 모두에서 지역 변수에 속성 ​​값을 할당하는 방법을 봅니다.

Angular의 경우 @Input() setter 함수를 사용하고 있습니다. 이 setter 함수는 새 속성 값이 변경될 때마다 호출됩니다.

export class ChildComponent implements OnInit {
  tasks = [];
  @Input("tasks") set onTaskChange(taskData) {
    this.tasks = taskData;
  }
  constructor() {}

  ngOnInit() {}
}

위에서 onTaskChange props가 변경되고 속성 데이터가 로컬tasks 클래스 변수에 할당될 때 tasks setter 함수가 호출됩니다.

Vue3의 경우 컴포지션 API를 사용하여 vue3에서 매우 쉽습니다. 우리는 vue3 구성 APItoRefs 함수에서 setup()를 사용하고 있습니다.

<script>
    import { toRefs } from 'vue';
    export default{
    name: 'Child',
    props:{
      tasks:{
        type: Array,
        default : [{'id': 0, 'taskName': 'Default Task'}]
      }
    },
    setup(props){
      const localTasks = toRefs(props).tasks;
      return {
        localTasks
      }
    }
  }
</script>

위의 설정 함수는 로컬 props 객체와 함께 vue에 의해 호출됩니다. 우리는 toRefs를 사용하여 작업 소품의 복사본을 만들고 localTasks 변수에 값을 할당하고 setup()에서만 반환합니다localTasks. setup()에서 반환되는 모든 항목은 구성 요소의 템플릿에서 액세스할 수 있습니다. 이제localTasks는 반응형 변수이며 prop 변경이 발생할 때마다 localTasks는 prop의 복사본을 가져오고 템플릿은 새 값을 가져옵니다.

각도 데모

Vue3 데모

당신은 나를 지원할 수 있습니다