I. 소개
구성 요소 시스템은 Vue.js 의 중요한 개념 중 하나로, 독립적이고 재사용 가능한 위젯을 사용하여 큰 응용 프로그램을 만들 수 있는 추상화를 제공합니다. 모든 유형의 응용 프로그램 인터페이스를 구성 요소 트리로 추상화할 수 있습니다.
그렇다면 어셈블리란 무엇일까요?
구성 요소는 HTML 요소를 확장하고 재사용 가능한 HTML 코드를 캡슐화할 수 있습니다. 구성 요소를 사용자 정의 HTML 요소로 생각할 수 있습니다.
둘째, 구성 요소를 등록하는 방법
Vue.js 를 사용하는 구성 요소는 구성 요소 생성자 만들기, 구성 요소 등록, 구성 요소 사용의 세 단계로 구성됩니다.
이 세 단계를 코드로 보여 드리겠습니다.
& lt! DOCTYPE html & gt
& lthtml & gt
& ltbody & gt
& LTP id = "app">
& lt! -참고: #app 는 Vue 인스턴스가 마운트된 요소이며, 구성 요소는 마운트된 요소 범위 내에서-> 를 사용해야 합니다
& lt 내 구성 요소>>& lt/my-component & gt；;
& lt/p & gt；;
& lt/body & gt；;
& ltscript src="ponent! & lt/p & gt；; `
}) 을 참조하십시오
& lt! -2. 구성 요소를 등록하고 구성 요소의 레이블을 지정합니다. 구성 요소의 HTML 태그는 다음과 같습니다
Vue.component ('내 구성 요소', 내 구성 요소)
& lt! -3. id 별 마운트 = app-& gt；;
새 vue (
엘:' #app'
});
& lt/스크립트 >
& lt/html & gt；; 실행 결과는 다음과 같습니다.
I. 글로벌 등록 및 지역 등록
Vue.component () 를 호출하여 구성 요소를 등록하면 구성 요소 등록은 전역적입니다. 즉, 모든 Vue 샘플에서 구성 요소를 사용할 수 있습니다.
전역 등록이 필요하지 않거나 구성 요소가 다른 구성 요소에서 사용되는 경우 option 객체의 components 속성을 사용하여 로컬 등록을 수행할 수 있습니다.
내 자신의 이해는 어셈블리라면 글로벌 어셈블리를 나타내고 어셈블리는 로컬 어셈블리를 나타낸다는 것이다.
위의 예를 지역 등록으로 변경할 수 있습니다.
& lt! DOCTYPE html & gt
& lthtml & gt
& ltbody & gt
& LTP id = "app">
& lt! -3.my-component 는 # app-& gt；; 하용하다.
& lt 내 구성 요소>>& lt/my-component & gt；;
& lt/p & gt；;
& lt/body & gt；;
& ltscriptsrc = "js/vue.js" > & lt/스크립트 >
& lt 스크립트 & gt
// 1. 구성 요소 생성자 만들기
Var myComponent = Vue.extend({
템플릿: "<P> 이것은 나의 첫 번째 구성 요소입니다! & lt/p & gt；; `
}) 을 참조하십시오
새 vue (
엘:' # 앱',
구성 요소: {
// 2. Vue 의 인스턴스 아래에 myComponent 구성 요소를 등록합니다.
내 구성 요소: 내 구성 요소
}
});
& lt/스크립트 >
& lt/html & gt；; My-component 구성 요소는 #app 요소에 해당하는 Vue 인스턴스 아래에 등록되므로 다른 Vue 인스턴스 아래에 사용할 수 없습니다.
& LTP id="app2 ">
& lt! -my-component 는 # app- > 에 속하는 로컬 구성 요소이므로 my-component 구성 요소를 사용할 수 없습니다
& lt 내 구성 요소>>& lt/my-component & gt；;
& lt/p & gt；;
& lt 스크립트 & gt
새 vue (
엘:' #app2'
});
& lt/스크립트 > 둘째, 구성 요소 등록 문법 설탕
위의 구성 요소를 등록하는 방법은 약간 번거롭습니다. 이 과정을 단순화하기 위해 Vue.js 는 등록 구문 sugar 를 제공합니다.
//글로벌 등록, my-component 1 은 태그 이름입니다.
Vue.component ('my-component1',{
템플릿: "<P> 이것이 첫 번째 구성 요소입니다! & lt/p & gt；; `
}) 을 참조하십시오
Var VM 1 = 새 vue (
El: "# app1"
Vue.component () 의 1 개 매개 변수는 태그 이름이고 두 번째 매개 변수는 option 객체입니다. 구성 요소 템플릿은 옵션 객체의 템플릿 속성을 사용하여 정의됩니다.
이렇게 하면 Vue 가 백그라운드에서 Vue.extend () 를 자동으로 호출합니다.
구성 요소 로컬 등록
Var vm2 = 새 Vue({
엘:' #app2',
구성 요소: {
//로컬 등록, my-component2 는 태그 이름입니다.
내 구성 요소 2':
템플릿: "<P> 이것은 두 번째 구성 요소입니다! & lt/p & gt；; `
},
//로컬 등록, my-component3 은 태그 이름입니다.
내 구성 요소 3':
템플릿: "<P> 이것은 세 번째 구성 요소입니다! & lt/p & gt；; `
}
}
} 셋. 모 어셈블리 및 서브어셈블리
어셈블리에서 다른 어셈블리를 정의하고 사용할 수 있습니다. 이는 모/자 어셈블리 관계를 구성합니다.
& lt! DOCTYPE html & gt
& lthtml & gt
& ltbody & gt
& LTP id = "app">
& lt 모 피쳐 어셈블리 & gt
& lt/parent-component >
& lt/p & gt；;
& lt/body & gt；;
& ltscript src="ponent! & lt/p & gt；; `
}) 을 참조하십시오
Var Parent = Vue.extend({
//사용
템플리트: "& lt/p & gt； 상위 구성 요소</p > & lt 서브어셈블리 & gt>& lt/child-component & gt；; ' 을 (를) 클릭합니다
구성 요소: {
//로컬로 등록된 서브어셈블리는 모 피쳐 어셈블리 내에서만 사용할 수 있습니다.
하위 구성요소': 하위 구성요소
}
}) 을 참조하십시오
//상위 구성 요소를 전역적으로 등록합니다.
Vue.component ('상위 어셈블리', 상위)
새 vue (
엘:' #app'
}) 을 참조하십시오
& lt/스크립트 >
& lt/html & gt；; 이 코드의 실행 결과는 다음과 같습니다
넷째, 스크립트 또는 템플릿 태그 사용
구문 설탕은 구성 요소 등록을 단순화하지만 템플릿 옵션에서 HTML 요소를 접합하는 것은 번거롭습니다. 이로 인해 HTML 과 JavaScript 가 고도로 결합되었습니다.
다행히 Vue.js 는 JavaScript 에 정의된 HTML 템플릿을 분리하는 두 가지 방법을 제공합니다.
& lt! DOCTYPE html & gt
& lthtml lang = "en">
& lthead & gt
& lt 메타 charset = "utf-8" >
& lttitle & gtVue 구성 요소
& ltscriptsrc = "js/vue.js" > & lt/스크립트 >
& lt/head & gt；;
& ltbody & gt
& LTP id="app 1 ">
& ltmy-com & gt；; & lt/my-com >
& ltmy-com1> & lt/my-com1>
& lt/p & gt；;
& lttemplate id = "myCom">
& LTP> 템플릿 레이블로 구성된 구성 요소입니다
& lt/template & gt；;
& lt script type = "text/x-template" id = "mycom1">
& LTP> 스크립트 태그로 구성된 구성 요소입니다
& lt/스크립트 >
& lt scriptsrc = "ponent ('my-com1',{
템플릿: "#myCom 1"
});
Var app 1 = 새 Vue({
El: "# app1",
구성 요소: {
내-com': {
템플릿: "#myCom"
}
}
});
& lt/스크립트 >
& lt/body & gt；;
& lt/html & gt；; 실행 결과:
참고: 사용
구성 요소 생성 및 등록 프로세스를 이해한 후에는 를 사용하는 것이 좋습니다
이를 통해 HTML 코드와 JavaScript 코드를 분리하여 쉽게 읽고 유지 관리할 수 있습니다.
다섯째, 템플릿 고려 사항
1. 상위 어셈블리에서 하위 탭으로 사용됩니다.
& LTP id = "app">
& lt 모 피쳐 어셈블리 & gt
& lt 서브어셈블리 & gt& lt/child-component >
& lt/parent-component >
& lt/p & gt；; 이상은 잘못된 것이다. 왜 이런 방법이 효과가 없을까요? 하위 구성 요소가 상위 구성 요소에 등록되면 Vue.js 는 상위 구성 요소의 템플릿을 컴파일하고 템플릿 내용에 따라 상위 구성 요소가 렌더링할 HTML 이 결정되기 때문입니다.
& lt 상위 어셈블리 & gt? & lt/parent-component > 는 런타임에 해당하며 일부 하위 태그는 일반 HTML 로만 실행됩니다.
구성 요소의 템플릿에는 하나의 루트 요소 만 가질 수 있습니다. 다음과 같은 경우는 허용되지 않습니다.
템플릿: `<P> Vue 의 현재 인스턴스에서만 사용할 수 있는 로컬 사용자 정의 구성 요소입니다
& lt/button & gt； 안녕하세요 & lt/button > ```
구성 요소의 데이터는 함수여야 합니다.
구성 요소를 등록할 때 전달되는 구성은 Vue 인스턴스를 만들 때 전달되는 구성과 비슷하지만 몇 가지 차이점이 있습니다. 그 중 하나는 데이터 속성이 함수여야 한다는 것입니다.
이는 Vue 인스턴스와 같이 객체를 전달하는 경우 JS 의 object 유형 변수가 실제로 해당 객체에 대한 참조를 보유하기 때문에 이러한 구성 요소가 여러 개 있을 경우 데이터가 공유되고 한 구성 요소의 데이터가 변경되면 다른 구성 요소의 데이터가 변경되기 때문입니다.
객체를 반환하는 함수를 사용하면 구성 요소를 사용할 때마다 새 객체가 생성되므로 데이터를 즐기는 데 * * * 문제가 없습니다.
4.DOM 템플릿 분석
DOM 을 템플릿으로 사용할 때 (예: 기존 요소에 El 옵션을 마운트하는 경우) Vue 는 브라우저가 HTML 을 구문 분석하고 표준화해야 템플릿 내용을 얻을 수 있기 때문에 HTML 에 의해 제한됩니다. 특히 이런 요소들을 좋아합니다.
사용자 정의 구성 요소에서 이러한 제한 요소를 사용하면 다음과 같은 문제가 발생할 수 있습니다
& lt 테이블>
& ltmy-row & gt；; ..</my-row >
& lt/table & gt；; 구성 요소 사용자 정의
& lt 테이블>
& lttris = "my-row" > & lt/tr & gt；;
& lt/table & gt；; 즉, 표준 HTML 에서는 일부 하위 요소만 일부 요소에 배치할 수 있고 다른 요소는 특정 상위 요소에만 존재할 수 있습니다. 예를 들어 표에 P 를 넣을 수 없고, tr 의 상위 요소는 P 등이 될 수 없습니다. 따라서 사용자 정의 태그를 사용할 때 태그 이름은 여전히 이러한 태그의 이름이지만 태그의 is 속성에 사용자 정의 구성 요소의 이름을 채울 수 있습니다.
셋째, 동적 구성 요소
다중 탭 인터페이스와 같이 서로 다른 구성 요소 간에 동적으로 전환하는 것이 유용한 경우가 있습니다.
간단히 말해 마운트 지점에 여러 구성 요소를 배치한 다음 상위 구성 요소의 변수 중 하나에 따라 표시할 구성 요소를 결정하거나 표시하지 않습니다.
중요: 마운트 지점에 구성 요소 레이블을 사용한 다음 v-bind:is= "Component Name "을 사용하면 일치하는 구성 요소 이름을 자동으로 찾을 수 있습니다. 그렇지 않으면 표시되지 않습니다.
동적 구성 요소, 먼저 사례 효과 보기:
코드 데모: CSS 코드는 위 예제 효과와 같이 복사되지 않습니다.
& ltscriptsrc = "/vue" > & lt/스크립트 >
& LTP id = "dynamic-component-demo" class = "demo" >
& lt 버튼 v-for= "탭의 탭"
V-bind: key = "탭"
V-bind:class="['tab-button', {active: currenttab = = = = tab}] "
V-on: click = "currenttab = tab" > {{tab}} & lt/button & gt；;
& lt 구성 요소 v-bind: is = "currenttabcomponent" class = "tab" > & lt/component & gt；;
& lt/p & gt；; 여기, v-bind:key 는 사실 선택 사항입니다. 키에 대한 자세한 소개는 홈페이지를 참조하십시오.
여기에 v-bind:class 와 v-on:click 을 사용하여 스타일을 변경합니다.
핵심은 구성요소 레이블입니다.
& lt 스크립트 & gt
//표시는 세 가지 구성요소를 정의합니다.
Vue.component ('ta b-section chief', {
템플릿: "<P> 모 * * * 에는 100 과장이 있습니다
}) 을 참조하십시오
Vue.component('tab-director', {
템플릿: "<P> 에는 50 명의 감독이 있습니다
}) 을 참조하십시오
Vue.component('tab-Director', {
템플릿: "<P> 1 * * * 에는 10 개의 컨트롤러가 있습니다
}) 을 참조하십시오
새 vue (
El:' # 동적 구성 요소 데모',
데이터: {
현재 라벨: "감독",
탭: ['과장',' 주임',' 주임']
},
//currentTab 의 변경 사항에 따라 선택할 구성 요소를 결정하는 속성을 계산합니다.
계산된 값: {
CurrentTabComponent: 함수 () {
Return 'tab-'+this.currentTab
}
}
}) 을 참조하십시오
& lt/스크립트 > 이 사건을 다 보고 나면, 너는 이미 방법을 익혔다고 믿는다. 더 흥미 진진한 Gxl 의 다른 관련 웹 문장!
추천 읽기:
Js 사용 방법 (코드 포함)
JS 파일을 동적으로 가져오는 방법