이 글은 Vue 컴포넌트의 기본에 대한 관련 지식 포인트와 코드 예제를 요약한 것입니다. 도움이 필요한 친구들이 배우고 참고할 수 있습니다.
컴포넌트란 무엇인가요?
컴포넌트는 데이터와 메서드를 간단하게 캡슐화한 것입니다. 웹의 구성 요소는 실제로 페이지의 구성 요소라고 할 수 있습니다. 이는 독립적인 논리와 기능을 갖춘 인터페이스인 동시에 지정된 인터페이스 규칙에 따라 서로 통합될 수 있으며 최종적으로는 완전한 형태가 됩니다. 애플리케이션 페이지는 탐색, 목록, 팝업 창, 드롭다운 메뉴 등과 같은 유사한 구성 요소로 구성됩니다. 페이지는 이러한 구성 요소를 위한 컨테이너일 뿐입니다. 구성 요소는 자유롭게 결합되어 완전한 기능을 갖춘 인터페이스를 형성합니다. 구성 요소가 필요하지 않거나 구성 요소를 교체하려는 경우 작업에 영향을 주지 않고 언제든지 해당 구성 요소를 교체하고 삭제할 수 있습니다. 전체 응용 프로그램. , 프론트 엔드 컴포넌트화의 핵심 아이디어는 거대하고 복잡한 것을 합리적인 세분성을 가지고 작은 것으로 분할하는 것입니다.
개발 효율성을 높이고, 재사용을 촉진하고, 디버깅 단계를 단순화하고, 전체 프로젝트의 유지 관리성을 개선하고, 공동 개발을 촉진하는 데 사용합니다.
가벼운 프런트 엔드 프레임워크인 vue의 핵심은 구성 요소 개발입니다.
구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소로 나타날 수도 있습니다.
Vue에서 구성 요소는 재사용 가능한 Vue 인스턴스입니다. 구성 요소는 재사용 가능한 Vue 인스턴스이기 때문에 데이터, 계산, 감시, 메서드 및 수명 주기 후크와 같은 새로운 Vue와 동일한 옵션을 받습니다. 유일한 예외는 el과 같은 루트 인스턴스별 옵션입니다.
구성 요소 등록
전역 등록
Vue.comComponent를 통해 구성 요소 생성:
Vue.component('my-component-name', {
// ... 选项 ...
})이 구성 요소는 전역적으로 등록됩니다. 즉, 등록 후 새로 생성된 Vue 루트 인스턴스(새 Vue)의 템플릿에서 사용할 수 있습니다. 예:
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<p id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</p>모든 하위 구성 요소에 대해서도 마찬가지입니다. 즉, 이 세 가지 구성 요소가 내부적으로도 서로 사용할 수 있다는 의미입니다.
부분 등록
글로벌 등록은 종종 이상적이지 않습니다. 예를 들어 webpack과 같은 빌드 시스템을 사용하는 경우 모든 구성 요소를 전역으로 등록한다는 것은 구성 요소를 더 이상 사용하지 않더라도 최종 빌드 결과에 계속 포함된다는 의미입니다. 이로 인해 사용자가 다운로드하는 JavaScript 양이 불필요하게 증가합니다.
이 경우 일반 JavaScript 개체를 통해 구성 요소를 정의할 수 있습니다:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }그런 다음 구성 요소 옵션에서 사용하려는 구성 요소를 정의합니다:
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})구성 요소 개체의 경우 각 속성의 속성 이름은 사용자 정의 요소의 이름이고 속성 값은 이 구성 요소의 옵션 개체입니다.
로컬로 등록된 구성 요소는 하위 구성 요소에서 사용할 수 없습니다. 예를 들어 ComponentB에서 ComponentA를 사용하려면 다음과 같이 작성해야 합니다.
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}Babel 및 webpack에 등록된 구성 요소 사용
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}ES2015+에서는 A를 입력합니다. ComponentA와 유사한 변수 이름은 실제로 ComponentA의 약어입니다: ComponentA, 즉 이 변수 이름은 다음과 같습니다.
템플릿에 사용된 사용자 정의 요소의 이름
이 구성 요소의 옵션이 포함된 변수 이름
자동화된 전역 기본 구성 요소 등록
이해가 안 돼요.
data는 함수여야 합니다
data: {
count: 0
}이렇게 정의된 data의 변수는 전역 변수입니다. 구성 요소를 사용할 때 한 구성 요소의 변수 값을 수정하면 모든 구성 요소의 변수 값에 영향을 미칩니다. 변수 간섭을 방지하려면 구성 요소의 데이터 옵션이 함수여야 하므로 각 인스턴스는 반환된 개체의 독립적인 복사본을 유지할 수 있습니다.
data: function () {
return {
count: 0
}
}동적 구성 요소
서로 다른 구성 요소 간 동적 전환은 매우 유용합니다. 다중 탭 인터페이스와 같은 경우:
위 내용은 Vue의
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>
기사를 선택하면 알 수 있습니다. , 보관 탭으로 전환한 다음 게시물로 다시 전환하면 이전에 선택한 기사가 더 이상 표시되지 않습니다. 이는 새 탭으로 전환할 때마다 Vue가 새로운 currentTabComponent 인스턴스를 생성하기 때문입니다.
동적 구성 요소의 동작을 재현하는 것은 종종 매우 유용하지만, 이 경우 해당 태그의 구성 요소 인스턴스가 처음 생성될 때 캐시되는 것을 선호합니다. 이 문제를 해결하기 위해 동적 구성요소를
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
여기에서 동적 구성 요소의 예를 볼 수 있습니다. https://jsfiddle.net/chrisvfritz/Lp20op9o/
dom标签内使用组件
有些 HTML 元素，诸如