Vue 구성 요소 및 구성 요소 등록 방법
그럼 Vue 구성 요 소 는 무엇 입 니까?이것 은 vue.js 의 가장 강력 한 기능 중 하나 로 확장 가능 한 html 요소 입 니 다.재 활용 가능 한 코드 이자 Vue 인 스 턴 스 입 니 다.같은 옵션 대상(일부 루트 특유 의 옵션 제외)을 받 아들 이 고 같은 수명 주기 갈 고 리 를 제공 할 수 있 습 니 다.
구성 요소 사용
구성 요소 이름 대소 문자
구성 요소 이름 을 정의 하 는 방법 은 두 가지 가 있 습 니 다.
kebab-case 사용 하기
Vue.component('my-component-name', { /* ... */ })
kebab-case(짧 은 횡선 구분 이름)를 사용 하여 구성 요 소 를 정의 할 때 도 이 사용자 정의 요 소 를 참조 할 때 kebab-case 를 사용 해 야 합 니 다.예 를 들 어PascalCase 사용 하기
Vue.component('MyComponentName', { /* ... */ })
PascalCase(낙타 봉 식 이름)를 사용 하여 구성 요 소 를 정의 할 때 이 사용자 정의 요 소 를 참조 할 때 두 가지 이름 을 사용 할 수 있 습 니 다.즉,구성 요소 의 등록 은 전역 등록 과 부분 등록 으로 나 뉜 다.
전역 등록
우 리 는 이미 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
},
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.