VUE에서 내보내기 기본값 및 가져 오기 방법

내보내기 기본값은 VUE 구성 요소를 내보내고 다른 모듈에 액세스 할 수 있습니다. 가져 오기는 단일 또는 여러 구성 요소를 가져올 수있는 다른 모듈에서 구성 요소를 가져 오는 데 사용됩니다.

VUE의 export default 및 import : 섬세한 구성 요소 조합

많은 초보자들은 VUE 구성 요소의 export default 과 import 에 의해 혼란스러워하며, 그들은 구별 할 수없는 쌍둥이 한 쌍과 같으며 항상 누가 누구인지 알아낼 수 없다고 생각합니다. 실제로, 그것들을 이해하는 열쇠는 VUE 구성 요소의 모듈성에 대한 아이디어를 이해하는 데 있습니다. 이 기사에 대해 자세히 설명하여 완전히 파악할 수 있습니다.

결론에 대해 먼저 이야기 해 봅시다. export default VUE 구성 요소를 내보내는 데 사용되며 import 이 구성 요소를 가져와 다른 곳에서 사용하는 데 사용됩니다. 단순한? 그러나 여기에는 여러 가지 방법이 있습니다.

기본 사항 : 모듈성 및 구성 요소

VUE에서는 구성 요소 개발을 옹호하여 복잡한 페이지를 작고 재사용 가능한 구성 요소로 나눕니다. export default 및 import 구성 요소 모듈화를 달성하기위한 열쇠입니다. 모든 코드가 그들없이 하나의 파일에 쌓여 있다면 유지 관리하는 것이 재난이 될 것이라고 상상해보십시오!

export default : 구성 요소의 내보내기

export default 문의 목적은 다른 모듈에 액세스 할 수 있도록 VUE 구성 요소를 내보내는 것입니다. 하나의 기본 구성 요소 만 내보낼 수 있습니다. 예를 참조하십시오 :

 <code class="javascript">// MyComponent.vue export default { name: 'MyComponent', data() { return { message: 'Hello from MyComponent!' }; }, template: ` <div> <p>{{ message }}</p> </div> ` };</code>

이 코드는 MyComponent 라는 구성 요소를 정의하고 export default 사용하여 내보내립니다. 여기에는 export default 기능이 하나뿐입니다.

import : 구성 요소의 항목

import 명령문의 목적은 다른 모듈에서 구성 요소를 가져 오는 것입니다. 단일 구성 요소 또는 여러 구성 요소를 가져올 수 있습니다. 위에서 정의한 MyComponent 가져 오는 방법을 살펴 보겠습니다.

 <code class="javascript">// App.vue import MyComponent from './MyComponent.vue'; export default { name: 'App', components: { MyComponent }, template: ` <div id="app"> <mycomponent></mycomponent> </div> ` };</code>

여기서 MyComponent.vue 파일에서 MyComponent 구성 요소를 가져 오기 위해 import MyComponent from './MyComponent.vue' . 그런 다음 components 옵션에 구성 요소를 등록하고 마지막으로 템플릿에서 <mycomponent></mycomponent> 로 렌더링하십시오. 매우 간단하지 않습니까?

고급 사용 및 잠재적 문제

수출 할 여러 구성 요소가 있다면 어떻게해야합니까? 현재 내보내기 export default 대신 export 명령문을 사용할 수 있습니다. export 사용하면 여러 이름의 구성 요소를 내보내려면 가져올 때 해당 이름이 필요합니다. 이것은 대규모 프로젝트에서 더 유연하지만 관리 복잡성을 추가합니다.

일반적인 실수는 components 옵션에 가져온 구성 요소를 등록하는 것을 잊어 버리는 것입니다. 등록을 잊어 버린 경우 VUE는 구성 요소를 인식하지 않아 실패를 렌더링합니다. 디버깅시 components 옵션을 다시 확인하여 가져온 모든 구성 요소가 올바르게 등록되어 있는지 확인하십시오.

또한 경로의 정확성은 중요합니다. import 명령문의 경로가 올바른지 확인하십시오. 그렇지 않으면 모듈이 찾을 수없는 오류가 발생합니다. 상대적 또는 절대 경로는 모두 괜찮지 만 일관성을 유지하십시오.

성능 최적화

대규모 프로젝트에서는 많은 구성 요소 가져 오기가 성능에 영향을 줄 수 있습니다. 로딩 속도를 최적화하기 위해 주문형로드 또는 코드 세분화 기술을 사용하는 것을 고려할 수 있습니다. 이러한 기술은이 기사의 범위를 벗어나지 만 VUE를 깊이 연구 한 후에는 탐구 할 가치가 있습니다.

요컨대, export default 과 import VUE 구성 요소 모듈 식의 초석이며,이를 이해하는 것이 고품질 VUE 응용 프로그램을 작성하는 열쇠입니다. 그것들은 함께 일하고, export default 수출을 담당하고, import 수입에 책임이 있으며, 둘 다 없어서는 안될 것입니다. 더 많은 연습을하고 더 많이 연습하면 쉽게 통제 할 수 있습니다!

위 내용은 VUE에서 내보내기 기본값 및 가져 오기 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!