vue.js 분할 구성 요소에 대한 자세한 소개

이번에는 Vue.js에서 조각을 그룹화하는 방법을 보여 드리겠습니다. Vue.js에서 구성 요소를 나누는 notes는 무엇인가요?

일부 공통 페이지의 경우 모든 사람이 함께 앉아서 코드를 입력할 수 있습니다. 그러나 특히

모듈형개발에 적합한 일부 프레임워크를 사용하여 복잡한 기능을 갖춘 시스템으로 다른 페이지를 만들 수 있습니다. , 이는 매우 비효율적으로 보일 것이므로 Vue에서 컴포넌트가 어떻게 나누어지는지 간단히 살펴보겠습니다.

요약하면 두 가지 분할 방법 중 하나는 페이지의 기능 블록, 선택, 페이지네이션 및 구현에 많은 코드가 필요한 부분을 추출하여 합칠 수 있습니다. 그들을 분류하십시오. 페이지 영역, 헤더, 바닥글, 사이드바별로 구분하는 방법도 있습니다. 컴포넌트를 만든 후 Vue 컴포넌트는 어떻게 구현하나요?

Vue 구성요소는 어떻게 구현되나요? 먼저

파일 시스템 이 어떤 모습인지 살펴보겠습니다

APP.vue는 프로젝트의 입구이며, 우리가 나눈 컴포넌트도 객체입니다. APP.vue에서는 import를 사용하여 각 컴포넌트를 가져옵니다. Import, header는 오른쪽의 header.vue 파일을 참조합니다. 이 작성 방법은 es6의 작성 방법입니다. 물론 es6 컴포넌트화를 사용할 필요가 없다면 다른

require를 사용하여 작성해야 합니다. 패키징 프로세스를 수행하면 이 두 구성 요소가 app.vue에 도입됩니다. 내부에서는 이 두 구성 요소를 아직 페이지에서 사용할 수 없습니다.

Vue에서는 이 컴포넌트를 컴포넌트를 통해 등록해야 하며, 가져온 넣고, 템플릿 레벨에

를 작성하면 템플릿 레벨은 header.vue 및 footer.vue의 내용이 됩니다. 한 가지 주의할 점은 Vue를 사용하려면 먼저 등록해야 한다는 것입니다

Vue 구성 요소 간의 통신을 소개하고 개념을 준수하려면 먼저 header.vue 파일에 코드를 등록해야 합니다. 여기에 사용자 이름이라는 데이터가 있다고 가정하고 메서드는 dothis입니다. app.vue가 헤더 구성 요소를 호출하면 메시지가 등록됩니다. 헤더 속성에 직접 msg를 작성하고 app.vue의 모든 데이터를 header.vue에 전달할 수 있습니다. .여기 header.vue에 msg가 기록되지 않으면 속성을 얻을 수 없습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! RECEMEDRENDED 읽기 : vue 가족 버킷 프로젝트에 대한 실질적인 설명이 기본 JS 비동기 요청으로 Ajax를 구현하는 방법 vuex State Management를 사용하는 방법 vue2에서 모든 것을 선택하는 방법. 0과 테이블의 역선

위 내용은 vue.js 분할 구성 요소에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!