Vue.js 구성 요소 구분 방법

흔히 볼 수 있 는 일부 페이지 는 모두 가 함께 앉 아서 코드 를 두 드 리 면 됩 니 다.이 페이지 를 마치 고 다른 페이지 를 만 들 면 됩 니 다.그러나 기능 이 복잡 한 시스템 으로서 특히 모듈 화 개발 에 적합 한 프레임 워 크 를 사용 하면 효율 이 낮 아 집 니 다.그러면 우 리 는 Vue 에서 구성 요 소 를 어떻게 구분 하 는 지 단순히 봅 니 다.
요약 하면 두 가지 로 나 눌 수 있 습 니 다.두 가지 구분 방법 중 하 나 는 페이지 의 기능 블록,select,pagenation,그리고 대량의 코드 가 실현 되 어야 하 는 부분 입 니 다.우 리 는 이 를 추출 하여 함께 놓 거나 분류 할 수 있 습 니 다.페이지 영역 에 따라 header,footer,sidebar,구성 요소 가 있 으 면 Vue 의 구성 요 소 는 어떻게 이 루어 집 니까?

Vue 의 구성 요 소 는 어떻게 이 루어 집 니까?일단 파일 시스템 에서 어떤 지 볼 게 요.

APP.vue 는 프로젝트 의 입구 이 고 우리 가 나 눈 구성 요소 도 하나의 대상 입 니 다.APP.vue 에서 우 리 는 각 구성 요 소 를 import 로 가 져 옵 니 다.header 는 오른쪽 header.vue 파일 을 말 합 니 다.이 방법 은 es6 의 쓰기 입 니 다.물론 es6 구성 요 소 를 사용 하지 않 으 면 다른 requires 로 쓰 고 포장 처 리 를 해 야 합 니 다.이 두 구성 요 소 를 app.vue 에 만 도입 한다 면 페이지 에 서 는 이 두 구성 요 소 를 현실 적 으로 사용 할 수 없습니다.
Vue 에 서 는 components 를 통 해 이 구성 요 소 를 등록 하고 도입 해 야 합 니 다.  넣 은 다음 에 템 플 릿 차원 에서

와를 쓰 고 렌 더 링 을 한 후에 템 플 릿 차원 에서 header.vue 와 footer.vue 의 내용 이 됩 니 다.주의해 야 할 것 은 Vue 가 등록 해 야 사용 할 수 있 습 니 다.

Vue 구성 요소 간 의 통신 을 소개 합 니 다.하나의 개념 을 계승 하여 먼저 등록 해 야 합 니 다.header.vue 파일 에 있 는 코드 는 우리 안에 data 가 username 이 라 고 가정 한 다음 에 방법 은 dothis 입 니 다.우 리 는 속성 props 가 있 고 msg 를 등록 한 것 을 보 았 습 니 다.우리 의 app.vue 가 header 라 는 구성 요 소 를 호출 했 을 때 우 리 는 header 속성 에 msg 를 직접 쓸 수 있 습 니 다.또한 app.vue 에 있 는 모든 데 이 터 를 header.vue 에 전달 합 니 다.모든 것 은 Vue 의 메커니즘 에 의 해 이 루어 집 니 다.header.vue 에 msg 가 쓰 여 있 지 않 으 면 속성 을 얻 을 수 없습니다.
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue.js 구성 요 소 를 구분 하 는 방법 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!