기술나눔

Vue 3 구성 요소 통신에 대한 전체 설명: 기본 기술부터 고급 기술까지

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

소개

Vue 3에는 컴포넌트 통신에 새로운 유연성과 강력한 기능을 제공하는 Composition API가 도입되었습니다.

컴포넌트 통신 기본

구성 요소의 정의 및 기능

프런트 엔드 개발에서 구성 요소는 사용자 인터페이스를 구축하는 독립적인 단위로 생각할 수 있습니다. 이는 특정 기능과 스타일을 캡슐화하고 재사용이 가능하며 다른 부분과 독립적으로 개발 및 테스트될 수 있습니다. 구성 요소의 주요 기능은 코드 재사용성, 유지 관리성 및 확장성을 향상시키는 것입니다. 인터페이스를 여러 구성 요소로 분할함으로써 개발자는 복잡한 애플리케이션을 보다 쉽게 ​​관리할 수 있으며, 각 구성 요소를 최적화하여 전반적인 개발 효율성과 애플리케이션 성능을 향상시킬 수 있습니다.

구성요소 트리 및 상위-하위 구성요소 관계

Vue.js와 같은 프런트 엔드 프레임워크에서는 구성 요소를 중첩하여 구성 요소 트리를 형성할 수 있습니다. 이 트리 구조에서 각 구성 요소는 하위 구성 요소를 가질 수 있으며 이러한 하위 구성 요소는 자체 하위 구성 요소를 가질 수 있어 계층 구조를 형성합니다. 이러한 구조는 구성 요소 간의 관계를 명확하게 하고 관리 및 유지 관리를 용이하게 합니다.

  • 상위-하위 구성요소 관계 : 컴포넌트 트리에서 컴포넌트는 또 다른 컴포넌트를 생성할 수 있습니다. 이 경우 생성자를 부모 컴포넌트, 생성된 컴포넌트를 자식 컴포넌트라고 합니다. 상위 구성 요소는 하위 구성 요소에 데이터와 메서드를 전달할 수 있으며, 하위 구성 요소는 이벤트를 통해 상위 구성 요소에 정보를 보낼 수 있습니다. 이 상위-하위 관계는 구성 요소 통신의 기초입니다.
  • 형제 구성 요소 관계 : 동일한 상위 구성 요소 아래에 있는 여러 하위 구성 요소는 형제 구성 요소 관계입니다. 형제 구성 요소는 서로 직접 통신할 수 없으며 일반적으로 이들 사이의 통신은 상위 구성 요소를 통해 중계되어야 합니다.
  • 상위 및 하위 구성 요소 관계 : 컴포넌트 트리에서 상위 컴포넌트의 상위 컴포넌트는 상위 컴포넌트이고, 하위 컴포넌트의 하위 컴포넌트는 하위 컴포넌트입니다. 이 관계는 깊게 중첩된 구성 요소를 처리할 때 특히 중요합니다.

컴포넌트 트리와 상위-하위 컴포넌트 관계의 개념은 컴포넌트 통신을 이해하는 데 중요합니다. 이러한 기본 지식을 익히면 개발자가 구성 요소 간의 통신 메커니즘을 보다 효과적으로 설계하고 구현하는 데 도움이 될 수 있습니다.

상위-하위 구성요소 통신(Vue 3)

부모가 자식에게 데이터를 전달합니다(Props).

소품이란 무엇입니까?
Props는 상위 구성 요소가 하위 구성 요소에 데이터를 전달하는 메커니즘입니다.Vue 3에서는 다음을 사용합니다.definePropsAPI는 데이터의 단방향 흐름을 유지하고 구성 요소의 독립성과 재사용성을 보장하는 수신 소품을 선언하는 데 사용됩니다.

상위 컴포넌트에 props를 전달하는 방법
상위 구성 요소의 템플릿에서 다음을 사용합니다.v-bind또는 약어:데이터를 바인딩하려면:

  1. <template>
  2.    <ChildComponent :my-prop="parentData" />
  3. </template>

여기,:my-prop동적으로 바인딩된 소품임을 나타냅니다.parentData상위 구성 요소에 데이터가 정의되어 있습니까?。

하위 구성 요소에서 소품을 받는 방법
하위 구성 요소에서 다음을 사용하십시오.defineProps받은 props를 선언하려면:

  1. <script setup>
  2. import { defineProps } from 'vue';
  3.  
  4. const props = defineProps({
  5.    myProp: String
  6. });
  7. </script>

존재하다<script setup>구문 설탕에서,defineProps자동으로 props를 구성 요소의 반응형 속성으로 노출합니다.。

자식이 이벤트를 부모에게 전달합니다(방출)

방출하는 것은 무엇입니까?
Emit은 하위 구성 요소가 상위 구성 요소에 메시지를 보내는 메커니즘입니다.Vue 3에서는 다음을 사용합니다.defineEmits내보낼 수 있는 이벤트를 선언하고 사용하는 APIemit이벤트를 발생시키는 함수입니다.

하위 구성 요소에서 이벤트를 트리거하는 방법
하위 구성 요소의 메서드에서 다음을 사용합니다. defineEmits 내보낼 수 있는 이벤트를 선언하고 사용하려면 emit 트리거하려면:

  1. <script setup>
  2. import { defineEmits } from 'vue';
  3.  
  4. const emit = defineEmits(['my-event']);
  5.  
  6. function triggerEvent() {
  7.    emit('my-event', dataToPass);
  8. }
  9. </script>

defineEmits구성요소가 내보낼 수 있는 이벤트를 선언하는 데 사용됩니다.emit함수는 이러한 이벤트를 트리거하는 데 사용됩니다.

상위 구성요소에서 하위 구성요소 이벤트를 수신하는 방법
상위 구성 요소의 템플릿에서사용v-on또는 약어@ 하위 구성요소에서 발생하는 이벤트를 수신하려면 다음 안내를 따르세요.

  1. <template>
  2.    <ChildComponent @my-event="handleEvent" />
  3. //或者<ChildComponent v-on:my-event="handleEvent" />
  4. </template>

여기,@my-event청취 하위 구성 요소가 방출함을 나타냅니다.my-event이벤트,handleEvent상위 구성요소에 정의된 메소드입니다. 이벤트가 트리거되면 이 메소드가 호출됩니다.

종합적인 예

상위 구성요소가 있다고 가정합니다.ParentComponent그리고 하위 구성 요소ChildComponent, 상위 구성 요소는 하위 구성 요소에 데이터를 전달해야 하며, 하위 구성 요소는 특정 작업 후에 상위 구성 요소에 이를 알려야 합니다.

상위 구성 요소ParentComponent.vue

  1. <template>
  2.    <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
  3. </template>
  4.  
  5. <script setup>
  6. import { ref } from 'vue';
  7. import ChildComponent from './ChildComponent.vue';
  8.  
  9. const parentData = ref('initial data');
  10. const handleChildEvent = (data) => {
  11.    console.log('Received data from child:', data);
  12. };
  13. </script>

하위 어셈블리ChildComponent.vue

  1. <template>
  2.    <button @click="sendDataToParent">Send Data to Parent</button>
  3. </template>
  4.  
  5. <script setup>
  6. import { defineProps, defineEmits } from 'vue';
  7.  
  8. const props = defineProps({
  9.    myProp: String
  10. });
  11.  
  12. const emit = defineEmits(['child-event']);
  13.  
  14. function sendDataToParent() {
  15.    emit('child-event', props.myProp);
  16. }
  17. </script>

이 예에서 상위 구성요소는 다음을 통과합니다.:my-prop데이터를 하위 구성요소에 전달하고 전달합니다.@child-event 하위 구성 요소에서 발생하는 이벤트를 수신합니다.하위 구성요소 패스defineProps상위 구성 요소가 전달한 콘텐츠를 받습니다.myProp, 버튼 클릭 이벤트에서 사용emit상위 구성 요소에 데이터를 보냅니다.

Pinia 사용(Vue 3용 상태 관리 라이브러리)

피니아의 장점과 특징

Pinia는 공식적으로 권장되는 Vue 3용 상태 관리 라이브러리입니다. 이는 애플리케이션 상태를 관리하는 구성 요소 기반 방법을 제공합니다. Pinia의 주요 이점과 기능은 다음과 같습니다.

  • 구성요소 API: Pinia는 컴포넌트 기반 API를 채택하여 상태 관리와 컴포넌트 로직의 분리를 보다 자연스럽게 만듭니다.
  • 타입스크립트 지원: Pinia는 처음부터 TypeScript 지원을 고려하여 TypeScript로 개발할 때 더 나은 유형 추론 및 편집기 지원을 가능하게 했습니다.
  • 모듈식: Pinia를 사용하면 상태를 여러 매장으로 분할할 수 있으며, 각 매장은 자체 상태와 로직을 독립적으로 관리할 수 있습니다.
  • 복합 API 호환: Pinia는 Vue 3의 Composition API와 완벽하게 통합되어 상태 관리와 컴포넌트 로직의 분리를 더욱 자연스럽게 만듭니다.
  • 시간 여행 디버깅: Pinia는 시간 여행 디버깅 기능을 제공하여 개발자가 상태 변경 사항을 쉽게 역추적하고 검사할 수 있도록 합니다.
피니아 설정 및 사용 방법

Pinia를 사용하려면 먼저 Pinia를 설치해야 합니다.

npm install pinia

또는 원사를 사용하세요.

yarn add pinia

그런 다음 Vue 애플리케이션에서 Pinia를 설정합니다.

  1. import { createPinia } from 'pinia';
  2.  
  3. const pinia = createPinia();
  4. app.use(pinia);

상점 만들기:

  1. import { defineStore } from 'pinia';
  2.  
  3. export const useCounterStore = defineStore('counter', () => {
  4.     const count = ref(0);
  5.  
  6.     function increment() {
  7.         count.value++;
  8.     }
  9.  
  10.     return { count, increment };
  11. });

구성 요소의 저장소를 사용하십시오.

  1. <script setup>
  2. import { useCounterStore } from '@/stores/counter';
  3.  
  4. const counterStore = useCounterStore();
  5. </script>
  6.  
  7. <template>
  8.     <div>
  9.         <p>Count: {{ counterStore.count }}</p>
  10.         <button @click="counterStore.increment">Increment</button>
  11.     </div>
  12. </template>
부품과 피니아 통합

Pinia와 구성 요소의 통합은 주로 다음을 통해 매우 간단합니다.defineStore 상점을 생성하는 기능입니다. 구성 요소에서는 저장소의 상태와 메서드를 직접 사용할 수 있습니다.

  1. <template>
  2.     <div>
  3.         <p>Count: {{ count }}</p>
  4.         <button @click="increment">Increment</button>
  5.     </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { useCounterStore } from '@/stores/counter';
  10.  
  11.  
  12. const counterStore = useCounterStore();
  13. const { count, increment } = storeToRefs(counterStore);
  14. //如果这里不使用storeToRefs会丢失响应式特性
  15. </script>

위의 예에서는 템플릿에서 직접 액세스합니다.count카운터 값을 표시하고 버튼 클릭 이벤트에서 호출하려면increment카운터 값을 증가시키는 방법입니다.

Vue 3만의 독특한 통신 방식

제공/주입

Provide/Inject의 기본 사용법
Vue 3에서는provide그리고inject이는 구성 요소 계층 구조의 깊이에 관계없이 상위 구성 요소가 모든 하위 구성 요소에 종속성을 주입할 수 있도록 하는 상위 구성 요소와 하위 구성 요소 간의 통신 방법입니다.

  • 데이터를 제공하다: 상위 구성요소 사용법provide함수는 데이터를 제공합니다.
  • 데이터 주입: 하위 구성 요소에서 사용됩니다.inject함수는 데이터를 주입합니다.

제공/주입에 적용 가능한 시나리오
provide그리고inject다음 시나리오에 적용 가능합니다.

  • 여러 레이어를 거치지 않고 싶을 때props데이터를 전달할 때.
  • 구성 요소 트리의 여러 구성 요소가 데이터를 공유하려는 경우.

샘플 코드：

  1. // 祖先组件
  2. export default {
  3.   setup() {
  4.     const message = 'Hello from Ancestor!';
  5.     provide('message', message);
  6.   }
  7. }
  8.  
  9. // 子孙组件
  10. export default {
  11.   setup() {
  12.     const message = inject('message');
  13.     return { message };
  14.   }
  15. }
순간이동

텔레포트의 개념과 사용
TeleportVue 3에 추가된 새로운 내장 구성 요소로, 구성 요소 내부의 템플릿 일부를 DOM의 다른 위치로 "전송"할 수 있습니다.

컴포넌트 통신을 위해 텔레포트를 사용하는 방법
Teleport 컴포넌트 간의 통신에는 사용되지 않고 컴포넌트의 렌더링 위치를 제어하는 ​​데 사용됩니다.하지만 당신은 사용할 수 있습니다Teleport특별한 통신 방법은 구성 요소의 일부를 상위 구성 요소의 DOM으로 렌더링함으로써 달성됩니다.

샘플 코드：

  1. <!-- 父组件 -->
  2. <template>
  3.   <div>
  4.     <Teleport to="body">
  5.       <ChildComponent />
  6.     </Teleport>
  7.   </div>
  8. </template>
  9.  
  10. <!-- 子组件 -->
  11. <template>
  12.   <div>Some content</div>
  13. </template>
구성 API

컴포지션 API 소개
Vue 3에는 로직을 구성하고 재사용하는 새로운 방법을 제공하는 Composition API가 도입되었습니다.통과하다setup기능을 사용하면 개발자는 구성 요소의 응답 상태와 수명 주기를 보다 유연하게 제어할 수 있습니다.

구성 요소 간 통신에 ref 및 반응성 사용
ref그리고reactive반응형 데이터를 생성하기 위한 Composition API의 도구입니다.

  • ref기본 데이터 유형을 생성하기 위한 반응형 참조입니다.
  • reactive객체 유형 생성을 위한 반응형 참조입니다.

Composition API에서 제공 및 주입 사용
컴포지션 API에서는provide그리고inject허용되는setup구성 요소 간 통신을 달성하기 위한 함수에 사용됩니다.

샘플 코드：

  1. // 祖先组件
  2. import { provide } from 'vue';
  3.  
  4. export default {
  5.   setup() {
  6.     const message = ref('Hello from Ancestor!');
  7.     provide('message', message);
  8.   }
  9. }
  10.  
  11. // 子孙组件
  12. import { inject } from 'vue';
  13.  
  14. export default {
  15.   setup() {
  16.     const message = inject('message');
  17.     return { message };
  18.   }
  19. }

Vue 3의 이러한 독특한 통신 방법을 통해 개발자는 구성 요소 간의 통신을 보다 유연하게 구성하고 코드의 유지 관리성과 재사용성을 향상시킬 수 있습니다.

요약하다

Vue 3에는 컴포넌트 통신에 새로운 유연성과 강력한 기능을 제공하는 Composition API가 도입되었습니다. 구성 요소 통신은 프런트 엔드 개발에서 복잡한 사용자 인터페이스를 구축하는 데 핵심입니다. 여기에는 상위 구성 요소와 하위 구성 요소, 형제 구성 요소, 상위 구성 요소와 하위 구성 요소 간의 데이터 전송 및 이벤트 트리거가 포함됩니다. Vue 3는 기존 props 및 내보내기뿐만 아니라 새로운 Provide/Inject, Teleport 및 Composition API를 포함한 다양한 통신 방법을 제공합니다.

추천 관련 정보

창작이 쉽지 않습니다. 이 글이 도움이 된다면 좋아요를 눌러주실 수 있나요?

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에서 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편