Vue 구성 요소 및 구성 요소 등록 방법

Vue 를 사용 하여 프로젝트 개발 을 할 때 많은 사람들 이 vue 구성 요 소 를 접 할 것 이 라 고 믿 습 니 다.가장 흔히 볼 수 있 는 것 은 우리 가 사용 하 는 element-ui 구성 요소 라 이브 러 리 입 니 다.사용 하기에 정말 편리 하고 우리 의 개발 시간 을 크게 줄 였 습 니 다.한 항목 에 재 활용 가능 한 코드 블록 이 많 습 니 다.만약 우리 가 이 내용 을 하나의 구성 요소 로 포장 할 수 있다 면 여러 가지 중복 사용 을 편리 하 게 할 수 있 습 니 다.
그럼 Vue 구성 요 소 는 무엇 입 니까?이것 은 vue.js 의 가장 강력 한 기능 중 하나 로 확장 가능 한 html 요소 입 니 다.재 활용 가능 한 코드 이자 Vue 인 스 턴 스 입 니 다.같은 옵션 대상(일부 루트 특유 의 옵션 제외)을 받 아들 이 고 같은 수명 주기 갈 고 리 를 제공 할 수 있 습 니 다.
구성 요소 사용
구성 요소 이름 대소 문자
구성 요소 이름 을 정의 하 는 방법 은 두 가지 가 있 습 니 다.
kebab-case 사용 하기

Vue.component('my-component-name', { /* ... */ })
kebab-case(짧 은 횡선 구분 이름)를 사용 하여 구성 요 소 를 정의 할 때 도 이 사용자 정의 요 소 를 참조 할 때 kebab-case 를 사용 해 야 합 니 다.예 를 들 어.
PascalCase 사용 하기

Vue.component('MyComponentName', { /* ... */ })
PascalCase(낙타 봉 식 이름)를 사용 하여 구성 요 소 를 정의 할 때 이 사용자 정의 요 소 를 참조 할 때 두 가지 이름 을 사용 할 수 있 습 니 다.즉,은 모두 받 아들 일 수 있 습 니 다.그럼 에 도 불구 하고 DOM(즉 문자열 이 아 닌 템 플 릿)에서 직접 사용 할 때 kebab-case 만 유효 합 니 다.
구성 요소 의 등록 은 전역 등록 과 부분 등록 으로 나 뉜 다.
전역 등록
우 리 는 이미 Vue 를 만 드 는 방법 을 알 고 있다.

new Vue({
 el: '#app',
 //  
})
전역 구성 요 소 를 등록 하면 Vue.coponent(tagName,options)를 사용 할 수 있 습 니 다.예컨대

Vue.component('my-apprvuser',{
 template:'',
 data:function(){
 return{}
 }
 //  
})
위 에 서 는 가장 간단 한 전체 등록 예 이지 만 실제로 우 리 는 이렇게 사용 하지 않 을 것 이다.vue-cli 를 비계 도구 로구성 요 소 를 패키지 하기 위해 vue 파일 을 따로 만 들 것 입 니 다.여기 저희 가 만 들 게 요.  apprvUser.vue 파일

이 파일 구 조 는 정상 적 인 vue 파일 과 마찬가지 로 우리 가 패키지 할 구성 요소 입 니 다.
그리고 우리 main.js 파일(입구 파일)에 전역 구성 요 소 를 등록 합 니 다.

//     (  )  
import apprvUser from './views/audit/apprvUser'
Vue.component('my-apprvuser',apprvUser)
vue 파일 을 참조 하 는 경로 가 틀 리 지 않도록 주의해 야 합 니 다.전역 등록 후 다른 구성 요소 에서 구성 요소를 직접 사용 할 수 있 습 니 다.전역 등록 구성 요 소 는 이 렇 습 니 다.
부분 등록
부분 등록 은 사용 하고 자 하 는 vue 파일 에 등록 하여 도입 하 는 것 입 니 다.vue 홈 페이지 api 에는 간단 한 예 가 있 습 니 다.여러분 이 보 셔 도 되 지만 실제 과정 에서 저 희 는 거의 그렇게 사용 하지 않 습 니 다.
아니면 상술 한 걸 로.  aprvUser.vue 파일 을 예 로 들 면.
이 파일 의 동급 디 렉 터 리 에 있 는 다른 vue 파일 에 이 구성 요 소 를 등 록 했 습 니 다.export default 의 한 옵션 components 에서 이 구성 요 소 를 등록 합 니 다.
이것 은 부분 구성 요소 의 등록 입 니 다.현재 파일 에서 이 구성 요 소 를 사용 할 수 있 지만 다른 구성 요소 에 서 는 이 구성 요 소 를 직접 사용 할 수 없습니다.다른 구성 요소/vue 파일 에서 이 구성 요 소 를 사용 하려 면 전역 또는 부분 등록 을 해 야 합 니 다.

//     (  )  
import apprvUser from './apprvUser'

export default {
 components: {
 'my-apprvuser':apprvUser
 },
} 
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기