Vue.js 구성 요소 간 통신을 위한 디자인 패턴

개발자로서 우리는 관리 및 유지 관리가 가능한 코드를 생성하고 디버그 및 테스트도 더 쉽게 만들고 싶습니다. 이를 달성하기 위해 우리는 패턴이라는 모범 사례를 사용합니다. 패턴은 효율적이고 예측 가능한 방식으로 특정 작업을 수행하는 데 도움이 되는 입증된 알고리즘 및 아키텍처입니다.

이 튜토리얼에서는 가장 일반적인 Vue.js 구성 요소 통신 패턴과 우리가 피해야 할 몇 가지 함정을 살펴보겠습니다. 우리 모두는 실생활에서 모든 문제에 대한 단일 해결책이 없다는 것을 알고 있습니다. 마찬가지로 Vue.js 애플리케이션 개발에는 모든 프로그래밍 시나리오에 적용되는 범용 패턴이 없습니다. 각 모드에는 고유한 장점과 단점이 있으며 특정 사용 사례에 적합합니다.

Vue.js 개발자에게 가장 중요한 것은 주어진 프로젝트에 적합한 패턴을 선택할 수 있도록 가장 일반적인 패턴을 모두 이해하는 것입니다. 이를 통해 정확하고 효율적인 구성 요소 통신이 가능해집니다.

올바른 컴포넌트 통신이 왜 중요한가요?

Vue.js와 같은 구성 요소 기반 프레임워크를 사용하여 앱을 빌드할 때 우리의 목표는 앱의 구성 요소를 최대한 격리된 상태로 유지하는 것입니다. 이를 통해 재사용, 유지 관리 및 테스트가 가능해집니다. 구성 요소를 재사용 가능하게 만들려면 해당 구성 요소를 더 추상적이고 분리된(또는 느슨하게 결합된) 형태로 형성해야 합니다. 그러면 애플리케이션의 기능을 중단하지 않고 해당 구성 요소를 애플리케이션에 추가하거나 제거할 수 있습니다.

그러나 애플리케이션 구성 요소 간에 완전한 격리와 독립성을 달성할 수는 없습니다. 어떤 시점에서는 데이터 교환, 애플리케이션 상태 변경 등 서로 통신해야 합니다. 따라서 애플리케이션의 기능, 유연성 및 확장성을 유지하면서 이러한 통신을 올바르게 수행하는 방법을 배우는 것이 중요합니다.

Vue.js 구성요소 통신 개요

Vue.js에는 구성요소 간 통신의 두 가지 주요 유형이 있습니다.

1. 엄격한 부모-자녀, 자식-부모 관계를 바탕으로 직접적인 부모-자녀 소통.
2. 교차 구성 요소 통신, 하나의 구성 요소가 관계에 관계없이 다른 구성 요소와 "대화"할 수 있습니다.

다음 섹션에서는 적절한 예를 통해 두 가지 유형을 모두 살펴보겠습니다.

부모와 아이가 직접 소통

Vue.js가 기본적으로 지원하는 구성 요소 통신의 표준 모델은 소품과 사용자 정의 이벤트를 통해 구현되는 상위-하위 모델입니다. 아래 이미지에서 이 모델이 실제로 작동하는 모습을 시각적으로 볼 수 있습니다.

보시다시피 부모는 직계 자식하고만 통신할 수 있고 자식은 부모하고만 직접 통신할 수 있습니다. 이 모델에서는 피어 또는 구성 요소 간 통신이 불가능합니다.

다음 섹션에서는 위 이미지의 구성 요소를 가져와 일련의 실제 예제로 구현해 보겠습니다.

부모와 자녀의 소통

우리가 가지고 있는 구성 요소가 게임의 일부라고 가정해 보겠습니다. 대부분의 게임은 인터페이스 어딘가에 게임 점수를 표시합니다. Parent A 구성 요소에서 score 변수를 선언하고 이를 Child A 구성 요소에 표시한다고 가정해 보겠습니다. 그러면 어떻게 해야 할까요?

부모에서 자식으로 데이터를 전송하기 위해 Vue.js는 props를 사용합니다. 속성을 전달하려면 세 가지 필수 단계가 필요합니다.

1. 다음과 같이 자녀의 속성을 등록하세요. props: ["score"]
2. 하위 템플릿에 등록된 속성을 다음과 같이 사용하세요. <span>分数：{{ Score }}</span>
3. 다음과 같이 속성을 score 变量（在父级模板中），如下所示：<child-a :score="score"></child-a> 변수(상위 템플릿의)에 바인딩합니다. <child-a :score="score"></child-a>

실제로 무슨 일이 일어나고 있는지 더 잘 이해하기 위해 전체 예를 살펴보겠습니다.

으아악

CodePen 예제

인증 소품

간결함과 명확성을 위해 속기 변형을 사용하여 소품을 등록합니다. 하지만 실제 개발에서는 props를 검증하는 것이 좋습니다. 이렇게 하면 prop이 올바른 유형의 값을 받게 됩니다. 예를 들어 score 속성은 다음과 같이 확인할 수 있습니다.

으아악

props로 작업할 때는 리터럴 변형과 동적 변형의 차이점을 이해해야 합니다. prop을 변수에 바인딩하면 v-bind:score="score" 或其简写 :score="score"） ，因此，prop 的值将根据变量的值而变化。如果我们只是输入一个没有绑定的值，那么该值将按字面意思解释，并且结果将是静态的。在我们的例子中，如果我们编写 score="score"100 대신 score가 표시됩니다. 이 미묘한 차이에 주의해야 합니다. 하위 속성 업데이트

지금까지 게임 점수를 성공적으로 표시했지만 어느 시점에서는 업데이트해야 합니다. 이것을 시도해 봅시다.

Vue.component('ChildA',{
  template:`
    <div id="child-a">
      <h2>Child A</h2>
      <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data {{ this.$data }}

로그인 후 복사

로그인 후 복사