vue.js의 Props(단방향 데이터 흐름)에 대한 간략한 토론

prop는 단방향 바인딩입니다. 상위 구성 요소의 속성이 변경되면 하위 구성 요소로 전송되지만 그 반대 방향으로는 전송되지 않습니다. 이는 하위 구성 요소가 상위 구성 요소의 상태를 실수로 수정하여 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지하기 위한 것입니다.

또한 상위 구성 요소가 업데이트될 때마다 하위 구성 요소의 모든 props가 최신 값으로 업데이트됩니다. 즉, 하위 구성 요소 내부의 소품을 변경하면 안 됩니다. 이렇게 하면 Vue가 콘솔에 경고를 표시합니다.

prop를 변경하는 경우는 일반적으로 두 가지입니다.

1. prop는 초기 값으로 전달되고 하위 구성 요소는 초기 값을 로컬 데이터의 초기 값으로 사용합니다.

2. prop는 원본으로 사용됩니다. 변환해야 하는 값 값이 전달됩니다.

더 정확하게는 다음 두 가지 상황입니다.

1. 로컬 데이터 속성을 정의하고 prop의 초기 값을 로컬 데이터의 초기 값으로 사용합니다.

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2. prop 값으로 계산되는 계산된 속성을 정의합니다.

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

객체와 배열은 JavaScript의 참조 유형이며 동일한 메모리 공간을 가리킵니다. prop이 객체나 배열인 경우 하위 구성 요소 내에서 이를 변경하면 상위 구성 요소의 상태에 영향을 미칩니다.

영어 원본 주소: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

관련 추천:

2020 프론트엔드 Vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 vue.js의 Props(단방향 데이터 흐름)에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!