Vue에서 제공/주입을 사용하여 상위 구성 요소와 하위 구성 요소 간의 무응답 데이터 전송을 구현하는 방법

Vue는 개발자가 상위 구성 요소와 하위 구성 요소 간에 무응답 데이터 전송을 수행하는 데 도움이 되는 두 가지 고급 API인 제공 및 주입을 제공합니다. 이러한 데이터는 기본 값, 배열 및 객체일 뿐만 아니라 함수 및 클래스일 수도 있습니다.

Vue에서 구성 요소 간 데이터 전송은 일반적으로 상위 구성 요소와 하위 구성 요소 간, 형제 구성 요소 간 반응형 데이터 전송이라는 두 가지 유형으로 나뉩니다. 그러나 때로는 조상과 자손 사이에 응답하지 않는 일부 데이터를 전달해야 하는 경우가 있습니다. 이때 제공/주입의 사용이 필요합니다.

provide 및 inject는 크로스 레벨 구성 요소 간의 데이터 전송 문제를 해결하기 위해 Vue2.2.0에 도입되었습니다. 이전에는 상위 컴포넌트와 하위 컴포넌트 간에 데이터를 전송하려면 일반적으로 props와 이벤트를 통해 구현했습니다. 하지만 상위 컴포넌트와 하위 컴포넌트 사이의 비응답 데이터 전송이 필요한 경우, 이때는 props와 events를 사용하는 것이 적합하지 않습니다.

이제 예를 살펴보겠습니다.

<grand-parent>
    <parent>
        <child></child>
    </parent>
</grand-parent>

이 예에서 grand-parent는 조상 구성 요소이고 parent는 자식 구성 요소이며 child는 자손 구성 요소입니다. 제공을 사용하여 조부모에 일부 데이터를 제공한 다음 자식에 주입을 사용하여 이 데이터에 액세스할 수 있습니다.

먼저 상위 구성 요소에서 제공을 사용하여 데이터를 제공해야 합니다.

provide: {
    someData: '这是一些数据'
}

여기에서는 someData라는 비응답 데이터를 제공합니다.

그런 다음 하위 구성 요소에서 inject를 사용하여 이러한 데이터에 액세스합니다.

inject: ['someData'],

여기에서는 inject를 사용하여 someData 데이터를 주입하므로 하위 구성 요소의 someData에 액세스할 수 있습니다.

간단한 데이터 유형 외에도 제공을 사용하여 일부 함수와 클래스를 제공할 수도 있습니다.

provide: {
    someMethod: this.doSomething,
    someClass: new MyClass()
}

이 예에서는 메서드뿐만 아니라 클래스의 인스턴스도 제공합니다. 하위 구성 요소에서는 주입을 사용하여 이 데이터에 액세스할 수 있습니다.

inject: ['someMethod', 'someClass'],

여기에서는 주입을 사용하여 someMethod 및 someClass를 주입하므로 하위 구성 요소에서 이러한 데이터에 액세스할 수 있습니다.

제공 및 주입이 응답하지 않으므로 데이터 변경 사항이 수신되지 않습니다. 반응형 데이터 전송을 수행해야 한다면 props와 이벤트를 사용해야 합니다.

요약하자면, 제공 및 주입은 Vue의 매우 유용한 API로, 조상과 자손 간의 무응답 데이터 전송을 수행하는 데 도움이 될 수 있습니다. 응답하지 않는 일부 데이터를 전달해야 할 경우 제공 및 주입이 좋은 선택입니다.

위 내용은 Vue에서 제공/주입을 사용하여 상위 구성 요소와 하위 구성 요소 간의 무응답 데이터 전송을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!