Vue에서 페이지의 공통 헤더를 구성요소화하는 방법(자세한 튜토리얼)

이 글에서는 주로 페이지의 공통 헤더를 컴포넌트화하는 Vue의 방법을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

이 글에서는 페이지의 공통 헤더를 컴포넌트화하는 Vue의 방법을 소개하고 모두와 공유합니다. 자세한 내용은 다음과 같습니다.

어... 다시 vue-cli를 실행하세요.

이전에 다중 페이지 변환을 수행하고 vux의 UI 구성 요소를 소개했습니다. 이번에는 이 프로젝트를 기반으로 vue의 구성 요소에 대해 이야기하겠습니다.

제가 왜 항상 vue에 대한 블로그를 쓰는지 묻지 마세요. 다 생계를 위한 것입니다(……………)

공식 문서 주소입니다(https://cn.vuejs.org/v2/guide/) Components.html#컴포넌트란 무엇입니까?), 나는 컴포넌트에 대해 많은 글을 썼고 이것이 매우 유용하다는 것을 알게 될 것입니다.

공식 문서에서는 일부 구성요소의 개념을 하나씩 소개하지 않겠습니다.

본론으로 들어가서 프로젝트를 직접 다운로드해 봅시다

1 이전 프로젝트를 꺼내세요

2 이러한 요구에 따라 우리의 컴포넌트를 사용하고 index.js에 다음 코드를 추가하는 것이 당연합니다.

Vue.component('header-item', {
 props: ['message', 'backUrl'],
 template: `<header class="evaluate-header"><router-link :to="backUrl"><span><i class="iconfont"></i></span></router-link> <p><span>{{message}}</span></p> </header>`
})
// props用来传递数据
//template 一个html结构的模板

이전 프로젝트에서는 vue 라우팅을 사용했기 때문에 backUrl 매개변수는 구성 가능한 경로이며 실제 프로젝트에서 자신의 필요에 따라 구성할 수 있다는 점에 유의해야 합니다.

3 이전 프로젝트의 github 주소를 계속 게시합니다 https://github.com/qianyinghuanmie/vue-cli-위 내용은 모두를 위해 정리한 내용이므로 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

JavaScript에서 이미지를 더 크게 만드는 방법

vue+vuex+axios+echarts에서 중국 지도를 구현하는 방법

vue에서 스타일 간 전환을 구현하는 방법

해결 방법 입력 방법에 의해 입력 상자가 차단되는 문제

js에서 소프트 키보드가 입력 상자를 차단하는 문제를 해결하는 방법

Angular2에서 구성 요소 상호 작용을 구현하는 방법

위 내용은 Vue에서 페이지의 공통 헤더를 구성요소화하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!