SeouliteLab

[Vue.js] Vue 컴포넌트 간 데이터 전달을 위한 app.provide() 메서드 이해하기 본문

카테고리 없음

[Vue.js] Vue 컴포넌트 간 데이터 전달을 위한 app.provide() 메서드 이해하기

Seoulite Lab 2024. 4. 25. 08:09

Vue.js에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 app.provide() 메서드를 사용합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 효율적으로 전달할 수 있습니다.

app.provide() 메서드란?

app.provide() 메서드는 Vue 애플리케이션 내에서 데이터를 공급하는 역할을 합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 제공하고 전달할 수 있습니다.

예제

아래는 app.provide() 메서드를 사용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 데이터 전달 예제</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="app">
  <h1>부모 컴포넌트</h1>
  <child-component></child-component>
</div>

<script>
  // 하위 컴포넌트
  const ChildComponent = {
    template: `
      <div>
        <h2>자식 컴포넌트</h2>
        <p>{{ message }}</p>
      </div>
    `,
    inject: ['providedMessage'],
    data() {
      return {
        message: this.providedMessage
      }
    }
  };

  // 상위 컴포넌트
  const app = Vue.createApp({
    provide() {
      return {
        providedMessage: '부모 컴포넌트로부터 제공되는 데이터입니다.'
      };
    }
  });

  // 하위 컴포넌트 등록
  app.component('child-component', ChildComponent);

  // 애플리케이션을 #app 요소에 마운트
  app.mount('#app');
</script>

</body>
</html>

위 예제에서는 다음과 같은 작업을 수행합니다.

  1. ChildComponent라는 하위 컴포넌트를 정의합니다. 이 컴포넌트는 부모 컴포넌트로부터 제공된 데이터를 표시합니다.
  2. app.provide() 메서드를 사용하여 상위 컴포넌트에서 데이터를 제공합니다. 이때 제공되는 데이터는 하위 컴포넌트에서 inject 옵션을 사용하여 접근할 수 있습니다.
  3. 상위 컴포넌트에서 등록된 providedMessage 데이터를 하위 컴포넌트에서 사용하여 화면에 표시합니다.
저작자표시 비영리 변경금지 (새창열림)