Vue에서 제공/주입을 사용하여 여러 계층의 조상 및 자손에 데이터를 전달하는 방법

Vue는 효율적인 데이터 전송 방법인 제공/주입을 제공합니다. 이를 통해 여러 계층에 걸쳐 조상과 자손 간에 데이터를 전송하고 번거로운 소품 전송을 피할 수 있습니다. 이 기사에서는 Vue에서 제공/주입을 사용하여 상위 및 하위 계층의 여러 계층에 걸쳐 데이터 전송을 달성하는 방법을 소개합니다.

1. 제공 및 주입

제공 및 주입은 Vue2.2.0 버전 이후의 새로운 API로, 다중 계층 구성 요소 간의 데이터 전송을 실현하는 데 사용됩니다. 제공을 통해 구성 요소는 모든 하위 구성 요소에 종속성을 주입할 수 있으며 주입은 이 종속성을 수신하여 사용할 수 있습니다.

provide와 inject는 주로 element-ui와 같은 상위 플러그인/컴포넌트 라이브러리에 사용됩니다. element-ui에서 해당 구성 요소는 모두 최상위 구성 요소 라이브러리에 의존합니다. 이 구성 요소 라이브러리는 이러한 데이터를 전송하는 데 사용되는 모든 하위 구성 요소에 일부 공용 변수와 메서드를 제공해야 합니다.

2. 제공 및 주입 사용

구성 요소에서 제공을 사용하면 상위 구성 요소에서 제공하는 데이터를 얻을 수 있도록 하위 구성 요소에 주입 지점을 제공할 수 있습니다. 예:

// 父组件
export default {
  provide () {
    return {
      theme: this.theme
    }
  },
  data () {
    return {
      theme: 'light'
    }
  }
}

// 子组件
export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

위의 예에서 상위 구성 요소는 제공을 사용하여 데이터를 제공하고 데이터 개체를 하위 구성 요소에 노출합니다. 여기서 데이터는 문자열 유형입니다. 제공하는 방법은 제공 함수를 사용하는 것입니다. 제공 공식 문서에 따르면 이 함수의 반환 값은 객체입니다. 객체에 있는 키는 자손 주입 시 사용할 수 있으며, 값은 주입할 데이터로 변수, 함수 등이 될 수 있습니다.

하위 구성 요소에 주입을 사용하면 상위 구성 요소에서 제공하는 데이터를 받을 수 있습니다. 예:

export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

예제에서 하위 구성 요소는 구성 요소 옵션의 주입 옵션을 사용하여 데이터를 받습니다. "inject: [key]" 여기서 key는 상위 구성 요소에 노출될 데이터 개체의 키입니다. 여기서 핵심은 제공 기능에서 제공하는 것과 일치합니다. 기본적으로 종속성은 상위에서 검색된다는 점은 주목할 가치가 있습니다. 상위에서 검색하지 않으려면 주입에서 srcoll을 false로 설정해야 합니다. 상위 구성 요소에서 제공한 데이터만 하위 구성 요소에서 삽입할 수 있습니다.

3. 제공 및 주입에 대한 참고 사항

1. 제공으로 주입된 데이터는 하위 구성 요소에서 사용할 수 있지만 상위 구성 요소에서는 사용할 수 없습니다.

provide와 inject의 메커니즘에서 Provide에서 제공한 데이터는 주입을 통해 하위 구성 요소에 주입될 수 있습니다. 그러나 inject가 데이터를 수신하기 위해 상위 구성 요소에서도 사용되는 경우 inject는 기본적으로 상위 구성 요소에서 제공된 데이터를 찾고 Vue는 하위 구성 요소와 일관성을 유지하기 위해 상위 구성 요소를 찾지 않기 때문에 적용되지 않습니다. 구성 요소를 제공합니다.

2. 데이터를 반환하기 위해 제공에 화살표 기능을 사용하지 마세요.

provide는 데이터를 제공하기 위해 개체를 반환해야 하므로 개체를 반환하기 위해 종종 화살표 함수를 사용합니다. 예:

export default {
  provide: () => ({
    theme: 'light'
  })
}

그러나 대부분의 경우 화살표 함수를 사용하여 데이터를 제공하지 않습니다. 이 방향을 가지고 있습니다. 제공에서 화살표 기능을 사용하면 올바른 컨텍스트를 얻지 못하고 데이터 변경에 응답하지 않습니다.

3. provide 및 inject에서 $ 기호로 시작하는 이름을 사용하지 않는 것이 좋습니다.

제공 및 주입에서 $ 기호로 시작하는 이름 지정은 Vue에서 예약한 명명 규칙이므로 제공된 데이터를 시작하기 위해 $ 기호를 사용하지 않는 것이 좋습니다. Provide에서 $ 기호로 시작하는 이름을 사용하면 일부 문제가 발생할 수 있지만 inject에서 $ 기호로 시작하는 이름을 사용하면 무시됩니다.

4. 사용 시나리오

제공/주입의 주요 목적은 구성 요소 수준에 걸쳐 구성 요소 라이브러리를 구축하는 것입니다. 특히 여러 구성 요소는 테마 색상, 언어 등과 같은 일부 동일한 정보나 상태를 공유합니다.

실제 개발 프로세스에서는 시나리오를 쉽게 상상할 수 있습니다. 앱이나 페이지에는 유사한 구성 요소가 많이 있을 수 있습니다. 이러한 구성 요소는 동일한 상태나 방법을 사용해야 합니다. 계층 구조는 중복된 코드와 작업 중복을 방지하면서 공유된 정보와 상태를 전달합니다.

동시에 믹스인을 사용하여 코드 중복과 코드 중복을 방지하여 코드를 우아하고 깨끗하며 유지 관리하기 쉽게 만들 수도 있습니다.

5. 요약

provide/inject를 사용하는 것은 효율적인 데이터 전송 방법으로, 상위 항목과 하위 항목의 여러 계층에 걸쳐 데이터 전송을 달성하고 props 사용을 줄이는 데 도움이 될 수 있습니다. 그러나 제공/주입을 사용할 때 구성 요소의 성능과 정확성에 영향을 주지 않도록 따라야 할 몇 가지 예방 조치가 있다는 점에 유의해야 합니다. 동시에 실제 적용에는 시나리오에 대한 상세한 분석과 데이터 전송을 위한 제공/주입, props 또는 vuex의 합리적인 사용이 필요합니다.

위 내용은 Vue에서 제공/주입을 사용하여 여러 계층의 조상 및 자손에 데이터를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!