vue.extend 와 vue.component 의 차이 에 대한 분석
1841 단어 vue.extendvue.component
최근 한 친구 가 vue.extend 와 vue.component 사이 에 어떤 차이 가 있 느 냐 고 물 었 다.갑자기 이런 질문 에 대답 하지 못 하고 돌아 와 생각해 보 니 정리 할 필요 가 있 기 때문에 본 고 는 vue.extend 와 vue.component 의 차 이 를 소개 하고 자 합 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 해 보 겠 습 니 다.
Vue.extend 는 일부 옵션 을 미리 설정 한 Vue 인 스 턴 스 구조 기 를 되 돌려 줍 니 다.
var myVue = Vue.extend({
//
}) // “ ”
//
var vm = new myVue({
//
})
Vue.component 는 전역 적 으로 구성 요 소 를 등록 하 는 방법 입 니 다.Vue.extend 를 통 해 생 성 된 확장 인 스 턴 스 구조 기 를 하나의 구성 요소 로 등록 하 는 역할 을 합 니 다.템 플 릿 에서 이 구성 요소 이름 을 탭 으로 하 는 사용자 정의 요 소 를 만 났 을 때 new my Vue 와 같은 구조 함수 로 구성 요소 인 스 턴 스 를 자동 으로 생 성 하 는 것 으로 간단하게 이해 할 수 있 습 니 다.사용자 정의 요소 에 마 운 트 합 니 다.물론 실제 상황 은 이보다 훨씬 복잡 합 니 다.props 데이터 전달,slot 콘 텐 츠 배포,사용자 정의 이벤트,구성 요소 수명 주기...을 처리 해 야 합 니 다.인터넷 에서 한 네티즌 의 분석 을 보고 다음 과 같이 공유 했다.
extend 는 구성 요 소 를 구성 하 는 문법 기 입 니 다.
인 자 를 주 고 구성 요 소 를 주 고 이 구성 요 소 를 주 십시오.
Vue.coponent 라 는 전역 등록 방법 에 도 사용 할 수 있 고,임의의 vue 템 플 릿 에서 도
var apple = Vue.extend({
....
})
Vue.component('apple',apple)
vue 인 스 턴 스 나 구성 요소 의 components 속성 에 작용 하여 내부 에서 애플 구성 요 소 를 사용 할 수 있 습 니 다.
new Vue({
components:{
apple:apple
}
})
Vue.coponent 를 만 들 수도 있 고 구성 요 소 를 다음 과 같이 만 들 수도 있 습 니 다.
var apple = Vue.component('apple')
new Vue
vue 인 스 턴 스 를 만 드 는 겁 니 다.vm 인 스 턴 스 를 되 돌려 줍 니 다.api 에서 vm 의 설명 은
new Vue
만 든 것 입 니 다.총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.