집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js가 구성 요소를 나누는 방법

Vue.js가 구성 요소를 나누는 방법

php中世界最好的语言원래의: 2017-12-31 10:29:251503검색

이번에는 Vue.js에서 조각을 그룹화하는 방법을 가져왔습니다. 이 기사는 여러분에게 좋은 분석을 제공할 것입니다.

일부 공통 페이지의 경우 모든 사람이 함께 앉아서 코드를 입력할 수 있습니다. 그러나 복잡한 기능을 갖춘 시스템으로서 특히

모듈형에 적합한 일부 프레임워크를 사용하면 더욱 그렇습니다. 개발, 이는 매우 비효율적으로 보일 것이므로 Vue에서 컴포넌트가 어떻게 나누어지는지 간단히 살펴보겠습니다.

결론적으로 나누는 방법은 2가지가 있습니다. 그 중 하나는 페이지의 기능적 블록, 선택, 페이지네이션, 그리고 구현하는데 많은 코드가 필요한 부분을 추출해 낼 수 있습니다. 그것들을 하나로 묶거나 분류하십시오. 페이지 영역, 헤더, 바닥글, 사이드바별로 구분하는 방법도 있습니다. 컴포넌트를 만든 후 Vue 컴포넌트는 어떻게 구현하나요?

APP.vue는 프로젝트의 입구이고, 우리가 나눈 컴포넌트도

objects입니다. APP.vue에서는 import를 사용하여 각 컴포넌트를 가져옵니다. Import, header는 오른쪽의 header.vue 파일을 참조합니다. 이 작성 방법은 es6의 작성 방법입니다. 물론 es6 컴포넌트화를 사용할 필요가 없다면 다른 require를 사용하여 작성해야 합니다. 패키징 프로세스를 수행하면 이 두 구성 요소가 app.vue에 도입됩니다. 내부에서는 이 두 구성 요소를 아직 페이지에서 사용할 수 없습니다.

Vue에서는 이 컴포넌트를 컴포넌트를 통해 등록하고 도입해야 합니다. 넣고, 템플릿 레벨에

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

Vue 구성 요소 간의 통신을 소개하고 개념을 준수하려면 먼저 데이터가 있다는 가정 하에 header.vue 파일에 코드를 등록해야 합니다. 이는 username 이고 메소드는 dothis입니다. app.vue가 헤더 구성요소를 호출하면 헤더 속성에 직접 msg를 작성하고 app.vue를 추가할 수 있는

propertyprops가 있습니다. 내부의 모든 데이터는 header.vue로 전달되며 모든 것은 Vue의 메커니즘에 의해 구현됩니다. msg가 여기 header.vue에 기록되지 않으면 속성을 얻을 수 없습니다.

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