Vue 오류: 종속성 주입을 위해 올바르게 제공 및 주입을 사용할 수 없습니다. 어떻게 해결합니까?

Vue 오류: 종속성 주입을 위해 올바르게 제공 및 주입을 사용할 수 없습니다. 어떻게 해결합니까?

Vue 개발 과정에서 구성 요소 간에 데이터나 메서드를 공유해야 하는 경우가 종종 있습니다. Vue는 컴포넌트 통신을 구현하는 다양한 방법을 제공하며 그 중 하나는 제공 및 주입을 통한 종속성 주입입니다. 그러나 종속성 주입을 위해 제공 및 주입을 사용할 때 때때로 오류가 발생합니다. 이 기사에서는 이러한 문제에 대한 해결책을 논의합니다.

1. 오류 메시지

구성 요소에서 제공을 사용하여 데이터를 제공한 다음 하위 구성 요소에서 주입을 사용하여 이를 수신할 때 다음과 같은 오류 메시지가 나타날 수 있습니다.

[Vue warn]: The inject key "xxx" is already provided in xxx

이 오류 메시지는 현재 상태를 의미합니다. 동일한 구성 요소, 동일한 키 이름이 여러 번 제공됩니다.

2. 해결 방법

위 오류 메시지가 나타나면 다음 두 가지 방법으로 해결할 수 있습니다.

방법 1: 제공 위치 확인

먼저 제공 위치가 올바른지 확인해야 합니다. . 제공된 데이터 공급자는 상위 구성 요소여야 하며 상위 구성 요소에서만 사용할 수 있습니다. 자식 구성 요소나 형제 구성 요소에 데이터를 제공하기 위해 제공을 사용하는 등 제공 위치가 잘못된 경우 오류가 보고됩니다.

방법 2: 동일한 키 이름을 반복적으로 제공하지 마세요

동일한 컴포넌트에서 동일한 키 이름을 여러 번 제공할 수 없습니다. 위의 오류 메시지가 나타나면 다음 두 가지 방법으로 해결할 수 있습니다.

2.1 다른 키 이름을 사용하세요

데이터를 제공하는 컴포넌트에서 다른 키 이름을 사용하여 데이터를 제공할 수 있습니다. 예를 들어 다음은 데이터를 제공하는 컴포넌트입니다.

// 提供数据的组件
export default {
  provide() {
    return {
      foo: 'bar'
    }
  },
  // ...
}

데이터를 수신하는 컴포넌트에서는 수신에 사용되는 키 이름이 다릅니다.

// 接收数据的组件
export default {
  inject: {
    baz: { from: 'foo' }
  },
  // ...
}

위의 방법을 통해 동일한 컴포넌트에서 동일한 키 이름을 사용하는 것을 피합니다. 여러 번 제공됩니다.

2.2 기능적 구성요소 사용

Vue의 기능적 구성요소는 종속성 주입을 구현하는 간결한 방법을 제공하여 동일한 키 이름을 반복적으로 제공하는 문제를 방지합니다. 기능적 구성 요소에서는 키 이름을 반복적으로 제공하는 것에 대한 걱정 없이 종속성 주입을 위해 직접 제공 및 주입을 사용할 수 있습니다. 다음은 함수형 컴포넌트를 사용하여 의존성 주입을 구현한 예입니다.

// 函数式组件
export default Vue.extend({
  functional: true,
  provide() {
    return {
      foo: 'bar'
    }
  },
  inject: ['foo'],
  // ...
})

위의 방법으로 의존성 주입을 위해 Provide와 Inject를 사용할 때 키 이름을 반복적으로 제공하는 문제를 해결했습니다.

요약:

Vue에서 Provide 및 Inject를 사용한 종속성 주입은 구성 요소 통신에 매우 편리한 방법입니다. 그러나 사용 중에 오류 메시지가 나타나는 경우가 있습니다. 이 문서에서는 이러한 오류 메시지를 해결하기 위해 제공 위치를 확인하고 동일한 키 이름을 반복적으로 제공하지 않는 두 가지 방법을 사용합니다. 이 기사가 종속성 주입을 위해 제공 및 주입을 사용할 때 발생하는 문제를 해결하는 데 도움이 되기를 바랍니다.

위 내용은 Vue 오류: 종속성 주입을 위해 올바르게 제공 및 주입을 사용할 수 없습니다. 어떻게 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!