Vue 구성 요소 통신: 상위 구성 요소와 하위 구성 요소 간에 어떻게 통신합니까?-PHP 튜토리얼-php.cn

Vue 구성 요소 통신: 상위 구성 요소와 하위 구성 요소 간에 통신하는 방법은 무엇입니까?

Vue는 웹 애플리케이션을 구축하는 구성 요소 기반 방법을 제공하는 인기 있는 JavaScript 프레임워크입니다. 실제 개발에서는 부모 컴포넌트와 자식 컴포넌트 간의 통신이 필요한 상황에 자주 직면합니다. 이 기사에서는 Vue에서 일반적으로 사용되는 상위-하위 구성 요소 통신 방법을 소개하고 해당 코드 예제를 제공합니다.

Props

Props는 Vue의 상위 컴포넌트와 하위 컴포넌트 간에 가장 일반적으로 사용되는 통신 방법입니다. 이를 통해 상위 구성 요소가 하위 구성 요소에 데이터를 전달할 수 있습니다. 하위 구성요소에서 props는 상위 구성요소가 전달한 데이터를 수신하기 위한 배열 또는 객체로 선언됩니다.

로그인 후 복사

위의 예에서 상위 구성 요소는 message라는 prop을 하위 구성 요소에 전달합니다. 하위 구성 요소는 전달된 데이터를 받기 위해 props 배열을 통해 동일한 이름의 속성을 선언합니다. 하위 컴포넌트의 템플릿에서는 수신된 데이터를 보간식 {{ message }}를 통해 표시할 수 있습니다.

Emit

상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 것 외에도 하위 구성 요소에서 상위 구성 요소로 데이터를 보내거나 이벤트를 트리거해야 하는 경우가 많습니다. Vue는 하위 구성요소가 Emit을 통해 상위 구성요소와 통신할 수 있는 방법을 제공합니다.

로그인 후 복사

위 예에서 하위 구성 요소의 버튼 클릭 이벤트는 updateRating 메서드를 트리거하고 this.$emit(' rating-updated', rating) 이벤트를 통해 rating-updated라는 사용자 정의 값을 상위 구성 요소로 보냅니다. 등급 데이터 등급을 통과했습니다. 하위 구성 요소에서 발생한 등급 업데이트 이벤트를 수신하고 updateRating 메서드에서 이벤트를 처리하려면 상위 구성 요소에서 @ating-updated="updateRating"을 사용하세요.

$refs

때로는 상위 구성 요소에서 직접 하위 구성 요소의 속성이나 메서드에 액세스해야 하는 경우가 있습니다. Vue는 이 직접 액세스 방법을 구현하기 위해 $refs 속성을 제공합니다.

로그인 후 복사

위의 예에서 상위 구성 요소의 버튼 클릭 이벤트는 callChildMethod 메서드를 호출합니다. 메서드 내에서 this.$refs.childComponent는 하위 구성 요소에 액세스하고 하위 구성 요소의 childMethod 메서드를 호출하는 데 사용됩니다.

Provide/Inject

Provide/Inject는 상위 구성 요소가 레이어별로 명시적으로 전달하지 않고도 모든 하위 구성 요소에 데이터를 제공할 수 있도록 하는 고급 구성 요소 통신 방법입니다. 이 통신 방법은 크로스 레벨 구성 요소 간의 통신에 적합합니다.

로그인 후 복사

위의 예에서 상위 컴포넌트는 Provide 메소드를 통해 하위 컴포넌트에 message라는 데이터를 제공합니다. 손자 구성 요소는 inject: ['message']를 통해 이 데이터를 주입하고 템플릿에서 {{ message }}를 사용하여 표시합니다.

위에서는 Vue에서 일반적으로 사용되는 상위-하위 구성 요소 통신 방법을 소개합니다. 각 방법에는 적용 가능한 시나리오가 있습니다. 실제 개발에서는 특정 요구에 따라 적절한 통신 방법을 선택할 수 있습니다. 이 글이 Vue 컴포넌트 통신을 이해하는 데 도움이 되기를 바랍니다!

참조 링크: