Vue 학습

4장. 구성 요소 간의 상호 작용

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

3장에서는 생명주기 훅, 계산된 프로퍼티, 감시자, 메서드 및 기타 기능을 사용하여 컴포넌트를 구성하는 방법에 대해 자세히 살펴봤습니다. 또한 슬롯의 기능과 프로퍼티를 사용해 다른 컴포넌트로부터 외부 데이터를 수신하는 방법도 배웠습니다.

이 장에서는 이러한 기초를 바탕으로 사용자 정의 이벤트를 사용하여 컴포넌트 간의 상호작용을 구축하고 패턴을 제공/삽입하는 방법을 안내합니다. 또한 Vue 컴포넌트 내에서 표시 순서를 유지하면서 DOM 트리에서 요소를 이동할 수 있는 텔레포트 API를 소개합니다.

Vue의 중첩된 컴포넌트 및 데이터 흐름

Vue 컴포넌트는 그 안에 다른 Vue 컴포넌트를 중첩할 수 있습니다. 이 기능은 사용자가 복잡한 UI 프로젝트에서 코드를 더 작고 관리하기 쉽고 재사용 가능한 조각으로 구성할 수 있도록 하는 데 유용합니다. 중첩된 요소를 자식 컴포넌트라고 하고 이를 포함하는 컴포넌트를 부모 컴포넌트라고 합니다 .

Vue 애플리케이션의 데이터 흐름은 기본적으로 단방향이므로 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 수는 있지만 그 반대는 불가능합니다. 부모 컴포넌트는 props ( "옵션 API 살펴보기"에서 간략하게 설명)를 사용하여 데이터를 자식 컴포넌트로 전달할 수 있으며, 자식 컴포넌트는 사용자 정의 이벤트 emits 를 사용하여 이벤트를 부모 컴포넌트로 다시 방출할 수 있습니다. 그림 4-1은 컴포넌트 간의 데이터 흐름을 보여줍니다 .

그림 4-1. Vue 구성 요소의 단방향 데이터 흐름

함수를 소품으로 전달하기

다른 프레임워크와 달리 Vue에서는 함수를 자식 컴포넌트에 프로퍼티로 전달할 수 없습니다. 대신 함수를 사용자 정의 이벤트 이미터로 바인딩할 수 있습니다( "사용자 정의 이벤트를사용한 컴포넌트 간의 통신" 참조 ) .

소품을 사용하여 하위 컴포넌트에 데이터 전달하기

객체 또는 배열의 형태로 Vue 컴포넌트의 props 필드에는 컴포넌트가 부모로부터 받을 수 있는 사용 가능한 모든 데이터 속성이 포함됩니다. props 의 각 속성은 대상 컴포넌트의 소도구입니다. 부모로부터 데이터 수신을 시작하려면 예제 4-1 과 같이 컴포넌트의 옵션 객체에서 props 필드를 선언해야 합니다.

예 4-1. 컴포넌트에서 소품 정의하기

export default {
  name: 'ChildComponent',
  props: {
    name: String
  }
}

예제 4-1에서 ChildComponent 컴포넌트는 String 유형의 name 프로퍼티를 받아들입니다. 그러면 부모 컴포넌트는 예제 4-2 에서와 같이 이 name 프로퍼티를 사용하여 데이터를 자식 컴포넌트로 ...