VUE3 시작하기: 제공/주입을 사용하여 구성 요소 간 공유

VUE는 높은 사용 편의성, 강력한 유연성, 탁월한 성능 등의 장점을 갖춘 현대적인 프런트 엔드 프레임워크로, 프런트 엔드 개발자들의 선호도가 높아지고 있습니다. VUE3 버전은 더 나은 성능, 더 나은 아키텍처 디자인을 제공하며 더 사용자 친화적입니다. VUE3는 구성요소 간에 데이터를 공유하는 새로운 방법(제공/주입)을 제공합니다. 이번 글에서는 Provide/Inject의 사용법과 구현 과정을 자세히 소개하겠습니다.

Overview

provide/inject는 구성요소 간 데이터 공유를 위해 VUE3에서 공식적으로 권장하는 방법입니다. VUE2에서는 props/$emit과 Vuex를 통해 컴포넌트 간 데이터 통신을 구현하는 경우가 많습니다. 제공/주입의 가장 큰 특징은 보다 암시적인 방식으로 데이터 공유를 구현하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만든다는 것입니다.

provid/inject 사용법

provider/inject 사용법은 매우 간단합니다. 다음은 몇 가지 예입니다.

상위 구성 요소는 데이터를 제공합니다.

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

상위 구성 요소에서는 데이터 제공 메소드를 통해 message라는 메시지를 제공하고 값을 '부모님으로부터 안녕하세요'로 설정하세요. 그런 다음 하위 구성 요소에서 주입을 사용하여 이 데이터를 가져올 수 있습니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

하위 구성 요소에서는 주입 메서드를 사용하여 message라는 데이터를 가져올 수 있습니다.

하위 구성 요소는 데이터를 제공합니다

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

이 예에서는 상위 구성 요소에 message라는 반응형 데이터를 정의하고 해당 값을 'Hello from parent'로 설정합니다. 그런 다음 제공 메소드를 통해 이 데이터를 하위 구성요소에 제공합니다. 하위 구성 요소에서는 주입 메서드를 통해 메시지를 가져와 템플릿에서 사용합니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

여기서 정의한 메시지 데이터는 반응형입니다.

제공/주입 구현 프로세스

제공/주입 구현은 VUE3의 새로운 응답 시스템에 의존합니다. VUE3에서는 provideParent / injectSetupRef에 의존하여 작업을 제공/주입합니다. ProvideParent 함수는 데이터의 키 이름과 값을 모두 수신하는 제공 메소드와 유사하며, injectSetupRef는 상위 구성요소에서 데이터를 얻는 데 사용됩니다. 구체적인 구현 과정은 다음과 같습니다.

// provide函数
export function provide(key, value) {
  const vm = getCurrentInstance();
  if (!vm) {
    console.warn(`provide() can only be used inside setup().`);
  } else {
    let provides  = vm.provides;
    const parent = vm.parent;
    if (provides === EMPTY_OBJ) provides = vm.provides = Object.create(parent.provides);
    provides[key] = value;
  }
}

// inject函数
export function inject(key, defaultValue) {
  const vm = getCurrentInstance();
  if (vm) {
    const provides = vm.parent.provides;
    if (key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return defaultValue;
    } else {
      console.warn(`injection "${String(key)}" not found.`);
    }
  } else {
    console.warn(`inject() can only be used inside setup() or functional components.`);
  }
}

provide 함수에서는 getCurrentInstance 함수를 통해 현재 인스턴스를 획득하고 제공된 데이터를 현재 인스턴스의 presents 객체에 저장합니다. 현재 인스턴스가 존재하지 않으면 setup 함수에서 Provide 함수가 호출되지 않고 경고 메시지가 반환된다는 의미입니다.

inject 함수에서는 getCurrentInstance 함수를 통해 현재 인스턴스를 얻고 상위 구성 요소의 제공 객체에서 키에 해당하는 값을 얻습니다. key에 해당하는 값이 없으면 defaultValue가 반환됩니다. 현재 인스턴스가 존재하지 않는다면, 설정 함수나 기능 컴포넌트에서 inject 함수가 호출되지 않았음을 의미하며, 경고 메시지가 반환됩니다.

요약

이 글의 소개를 통해 우리는 Provide/Inject가 VUE3 컴포넌트 간에 데이터를 공유하는 훌륭한 방법이라는 것을 알 수 있습니다. 보다 암시적인 방식으로 데이터 공유를 구현하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다. 사용 중에는 제공된 데이터가 반응형이며 중첩된 구성 요소에서 사용될 수 있다는 점에 유의하세요. 동시에, 우리가 제공하는 데이터가 제공에 존재하지 않는 경우 인수[1]에 전달된 매개변수가 기본값으로 사용되므로 항상 유형에 주의해야 합니다. 그리고 매개변수의 값.

위 내용은 VUE3 시작하기: 제공/주입을 사용하여 구성 요소 간 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!