이번에는 Vue 컴포넌트의 기본 사용법과 Vue 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.
컴포넌트란 무엇입니까
컴포넌트는 데이터와 메서드를 간단히 캡슐화한 것입니다. 웹의 구성 요소는 실제로 페이지의 구성 요소라고 할 수 있습니다. 이는 독립적인 논리와 기능을 갖춘 인터페이스인 동시에 지정된 인터페이스 규칙에 따라 서로 통합될 수 있으며 최종적으로는 완전한 형태가 됩니다. 페이지는 내비게이션, 목록, 팝업창, 드롭다운 메뉴 등 이런 구성요소로 구성되어 있습니다. 페이지는 이러한 구성 요소를 위한 컨테이너일 뿐입니다. 구성 요소는 자유롭게 결합되어 완전한 기능을 갖춘 인터페이스를 형성합니다. 구성 요소가 필요하지 않거나 구성 요소를 교체하려는 경우 작업에 영향을 주지 않고 언제든지 해당 구성 요소를 교체하고 삭제할 수 있습니다. 전체 응용 프로그램. , 프론트 엔드 컴포넌트화의 핵심 아이디어는 거대하고 복잡한 것을 합리적인 세분성을 가지고 작은 것으로 분할하는 것입니다.
개발 효율성을 높이고, 재사용을 촉진하고, 디버깅 단계를 단순화하고, 전체 프로젝트의 유지 관리성을 개선하고, 공동 개발을 촉진하는 데 사용합니다.
가벼운 프런트 엔드 프레임워크인 vue의 핵심은 구성 요소 개발입니다.
구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소로 나타날 수도 있습니다.
Vue에서 구성 요소는 재사용 가능한 Vue 인스턴스입니다. 구성 요소는 재사용 가능한 Vue 인스턴스이기 때문에 데이터, 계산, 감시, 메서드 및 lifecycle후크와 같은 새로운 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+에서는 객체에 ComponentA와 같은 변수 이름을 넣는 것이 다음과 같습니다. 실제로 ComponentA: ComponentA의 약어, 즉 이 변수 이름은 다음과 같습니다.
템플릿에 사용된 사용자 정의 요소의 이름
이 구성 요소 옵션의 변수 이름이 포함되어 있습니다.
기본 구성 요소의 자동 전역 등록
안 했어요 이해가 안 돼요.
data는 함수여야 합니다
data: {
count: 0
}이렇게 정의된 data의 변수는 전역 변수입니다. 컴포넌트를 사용할 때 한 컴포넌트의 변수 값을 수정하면 모든 컴포넌트의 변수 값에 영향을 미칩니다. 변수 간섭을 방지하려면 구성 요소의 데이터 옵션이 함수여야 하므로 각 인스턴스는 반환된 개체의 독립적인 복사본을 유지할 수 있습니다.
data: function () {
return {
count: 0
}
}동적 구성 요소
다른 구성 요소 간에 동적으로 전환하는 데 매우 유용합니다. 예를 들어 유용합니다. , 다중 탭 인터페이스에서:
위 내용은 Vue의
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>
你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/
dom标签内使用组件
有些 HTML 元素，诸如