Vue 다중 레벨 컴포넌트 제공/주입 사용에 대한 자세한 설명

이번에는 Vue 다중 레벨 컴포넌트 제공/주입에 대한 자세한 설명을 가져왔습니다. Vue 다중 레벨 컴포넌트 제공/주입 사용 시 주의 사항은 무엇입니까?

provide/inject는 2.2 에 추가된 새로운 메서드로, 상위 구성 요소의 종속성(하나의 콘텐츠)을 모든 하위 항목에 주입할 수 있습니다.

provider/inject: 간단히 말하면 부모 컴포넌트에서 공급자를 통해 변수를 제공한 다음 자식 컴포넌트에서 inject를 통해 변수를 주입합니다.

Vue 공식 경고:

제공 및 주입은 주로 고급 플러그인/구성 요소 라이브러리에 대한 사용 사례를 제공합니다. 애플리케이션 코드에서 직접 사용하는 것은 권장되지 않습니다.

물론 경고는 경고일 뿐이므로 정상적으로 사용하셔도 됩니다.

사용 방법은 데이터와 소품이 결합된 선물 패키지와 매우 유사합니다.

var Provider = {
 provide: {
 foo: 'bar'
 },
 // ...
}
var Child = {
 inject: ['foo'],
 created () {
 console.log(this.foo) // => "bar"
 }
 // ...
}

유일한 차이점은 이전에 사용했던 이벤트 버스로 해결할 수 있지만 레이어별로 전달할 필요가 없다는 것입니다. 뿌리깊은 문제로 인해 전체 이벤트가 발생하게 됩니다. - 방출 구성이 너무 혼란스럽고 유지 관리가 어렵습니다. 제공/주입을 사용하면 상위-하위 단방향 데이터 흐름의 명확성을 보장할 수 있습니다.

React의 Context 제공자/소비자도 동일한 효과를 갖습니다. 아직 자세히 사용하지 않았기 때문에 React 자체에 대한 이해는 제한적입니다. 관심 있는 학생들은 나중에 문서를 읽고 자세히 알아볼 수 있습니다.

참고 기사:

Vue 공식 문서
Vue 2.2에서 제공/삽입

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사를 주목하세요. 웹사이트!

추천 자료:

JavaScript DOM 요소를 추가, 삭제 및 수정하는 단계에 대한 자세한 설명

Vue는 vee-validate를 사용하여 양식을 확인합니다.

위 내용은 Vue 다중 레벨 컴포넌트 제공/주입 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!