구성 요소는 무엇입니까?
구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화 할 수 있습니다. 더 높은 수준에서 구성 요소는 사용자 정의 요소이며 Vue.js의 컴파일러는 특수 기능을 추가합니다. 경우에 따라 구성 요소는 IS 기능으로 확장 된 기본 HTML 요소의 형태 일 수도 있습니다.
사용 구성 요소
등록하다
앞에서 언급했듯이 vue.extend ()를 사용하여 구성 요소 생성자를 만들 수 있습니다.
var mycomponent = vue.extend ({// 옵션 ...})이 생성자를 구성 요소로 사용하려면`vue.component (tag, constructor)`**에 등록해야합니다.
// GOLD CAMERTONT를 등록하고 태그는 my-componentVue.component ( 'my component', myComponent)입니다.
<p> vue.js는 W3C 규칙 (소문자, 짧은 막대 포함)을 의무화하지 않지만이 규칙을 따르는 것이 좋습니다.
구성 요소가 등록되면 부모 인스턴스 모듈에서 사용자 정의 요소 <my-component>로 사용할 수 있습니다. 루트 인스턴스를 초기화하기 전에 구성 요소가 등록되어 있는지 확인하십시오.
<div id = "example"> <my-component> </my-component> </div> // var mycomponent = vue.extend (템플릿 : '<div> 사용자 정의 구성 요소! </div>'}) // vue.component ( 'my-component', mycomponent) ( '{el :'#explice '}).렌더링 :
<div id = "example"> <div> 사용자 정의 구성 요소! </div> </div>
구성 요소의 템플릿은 사용자 정의 요소를 대체하고 사용자 정의 요소의 기능은 마운트 포인트입니다. 인스턴스 옵션 교체를 사용하여 교체할지 여부를 결정할 수 있습니다.
현지 등록
각 구성 요소를 전체적으로 등록 할 필요가 없습니다. 다른 구성 요소에서만 사용할 수 있으며 인스턴스 옵션 구성 요소에 등록 할 수 있습니다.
var child = vue.extend ({ / * ... * /}) var parent = vue.extend ({template : '...', 구성 요소 : {// <my-component>는 부모 구성 요소 템플릿 'my-component': child}}에서만 사용될 수 있습니다.이 캡슐화는 지침, 필터 및 전환과 같은 다른 리소스에도 적합합니다.
구문 설탕을 등록하십시오
이벤트를 더 간단하게 만들려면 생성자 대신 vue.component () 및 구성 요소 옵션으로 직접 옵션 객체를 전달할 수 있습니다. vue.js는 뒷 뒤에 vue.extend ()를 자동으로 호출합니다.
// vue.component ( 'my-component', {template : '<div> 사용자 정의 구성 요소! </div>'}) // 이것은 로컬 등록 var parent = vue.extend ({components : {emplate : '<div> 사용자 정의 구성 요소!'}})에서도 가능합니다.구성 요소 옵션 문제
VUE 생성자로 전달되는 대부분의 옵션은 vue.extend ()에서도 사용할 수 있지만 데이터와 EL의 두 가지 특별한 경우가 있습니다. vue.extend () : 객체를 데이터 옵션으로 전달한다고 상상해보십시오.
var data = {a : 1} var mycomponent = vue.extend ({data : data})이것의 문제는 MyComponent의 모든 인스턴스가 동일한 'data'객체를 공유한다는 것입니다! 이것은 기본적으로 우리가 원하는 것이 아니므로 함수를 '데이터'옵션으로 사용하여 새 개체를 반환해야합니다.
var mycomponent = vue.extend ({data : function () {return {a : 1}}})마찬가지로`el '옵션은`vue.extend ()`에 사용될 때도 기능이어야합니다.
템플릿 분석
Vue의 템플릿은 Dom 템플릿으로, 브라우저 기본 파서를 사용하여 자체적으로 구현하는 대신 브라우저 기본 파서입니다. 문자열 템플릿과 비교할 때 DOM 템플릿에는 몇 가지 이점이 있지만 문제가 있으며 유효한 HTML 스 니펫이어야합니다. 일부 HTML 요소는 그 내부에 어떤 요소를 배치 할 수 있는지에 제한이 있습니다. 일반적인 한계 :
• A는 다른 대화식 요소 (예 : 버튼, 링크)를 포함 할 수 없습니다.
• UL과 OL은 Li 만 직접 포함 할 수 있습니다
• SELECT에는 옵션 및 OptGroup 만 포함 할 수 있습니다
• 테이블에는 직접 Head, Tce, Tfoot, Tr, Caption, Col, Colgroup이 포함될 수 있습니다.
• TR은 Th와 TD 만 직접 포함 할 수 있습니다
실제로 이러한 한계는 예상치 못한 결과로 이어질 수 있습니다. 간단한 경우에는 작동 할 수 있지만 사용자 정의 구성 요소에 의존하여 브라우저 검증 전에 결과를 확장 할 수는 없습니다. 예를 들어, <my-select> <sollite> ... </옵션> </my-select>는 <select> ... </select>로 확장 되더라도 유효한 템플릿이 아닙니다.
또 다른 결과는 UL, Select, Table 등과 같은 내부 요소에 제한 사항이있는 태그에있는 태그에 사용자 정의 태그 (사용자 정의 요소 및 특수 태그 포함)를 사용할 수 없다는 것입니다. 이러한 요소 내부에 배치 된 사용자 정의 태그는 요소 외부에 언급되어 잘못 표현됩니다.
사용자 정의 요소의 경우 IS 속성을 사용해야합니다.
<table> <tr는 = "my-component"> </tr> </table>입니다
````,````` ''````` ''````` '
``: 여러 가지가있을 수 있습니다.
<table> <tbody v-for = "항목의 항목"> <tr> und row </tr> <tr> 홀수 행 </tr> </tbody> </table>
소품
소품을 사용하여 데이터를 전달합니다
구성 요소 인스턴스의 범위는 고아입니다. 이것은 부모 구성 요소의 데이터가 자식 구성 요소의 템플릿 내에서 직접 참조 할 수없고 참조해서는 안된다는 것을 의미합니다. 소품을 사용하여 데이터를 하위 구성 요소로 전달할 수 있습니다.
"Prop"는 부모 구성 요소에서 전달 될 것으로 예상되는 구성 요소 데이터 필드입니다. 아동 구성 요소는 소품 옵션으로 소품을 명시 적으로 선언해야합니다.
vue.component ( 'child', {// declare props props : [ 'msg'], // props를 템플릿에서 사용할 수 있습니다. //`this.msg`를 사용하여 템플릿을 설정할 수 있습니다 : '<span> {{msg}} </span>'})그런 다음 일반 문자열을 전달합니다.
<child msg = "hello!"> </child>
혹 vs. 수평 바
HTML 속성은 대소 문자를 사용하지 않습니다. 이름 형태의 Camelcase가있는 소품이 기능으로 사용되면 케밥 케이스 (짧은 수평선 분리)로 변환해야합니다.
vue.component ( 'child', {// javaScript props의 camelcase : [ 'myMessage'], 템플릿 : '<span> {{myMessage}} </span>'}) <!-html의 kebab-case-> <child mymessage = "hello! "> </child>역동적 인 소품
v-bind를 사용하여 HTML 속성을 식에 바인딩하는 것과 유사하게 V- 결합을 사용하여 동적 소품을 부모 구성 요소의 데이터에 바인딩 할 수도 있습니다. 상위 구성 요소의 데이터가 변경 될 때마다 자식 구성 요소로 전송됩니다.
<div> <입력 v-model = "parentmsg"> <br> <child v-bind : my-message = "parentmsg"> </child> </div>
`v-bind '의 약어 구문을 사용하는 것은 일반적으로 더 간단합니다.
<child : my-message = "parentmsg"> </child>
문자 구문 대 동적 구문
초보자의 일반적인 실수는 문자 구문을 사용하여 숫자 값을 전달하는 것입니다.
<!-문자열 "1"->를 통과했습니다
<comp some prop = "1"> </comp>
문자 그럴 소품이기 때문에 그 값은 실제 숫자 대신 문자열` "1"`에 전달됩니다. 실제 JavaScript 번호를 전달하려면 값이 JavaScript 표현식으로 계산되도록 동적 구문을 사용해야합니다.
<!-실제 숫자를 전달하십시오->
<comp : some-prop = "1"> </comp>
소품 바인딩 유형
PROP는 기본적으로 일원 바인딩입니다. 부모 구성 요소의 특성이 변경되면 하위 구성 요소로 전달되지만 다른 방법은 그렇지 않습니다. 이는 아동 구성 요소가 실수로 상위 구성 요소의 상태를 수정하는 것을 방지하기위한 것입니다. 이는 응용 프로그램의 데이터 흐름을 이해하기 어렵게 만듭니다. 그러나 .sync 또는 .once 바인딩 수정자를 사용하여 양방향 또는 단일 시간 바인딩을 명시 적으로 강제 할 수도 있습니다.
비교 구문 :
<!-기본값은 편도 바인딩-> <child : msg = "parentmsg"> </child> <!-양방향 바인딩-> <child : msg.sync = "parentmsg"> </child> <!-싱글 바인딩-> <child : msg.once = "parentmsg"> </child>
양방향 바인딩 아동 구성 요소의 MSG 속성을 부모 구성 요소의 ParentMSG 속성과 다시 동기화합니다. 단일 바인딩은 생성 후 변경 사항을 동기화하지 않습니다.
Prop이 객체 또는 배열 인 경우 참조로 전달됩니다. 하위 구성 요소 내에서 수정하면 사용 된 바인딩 유형에 관계없이 부모 구성 요소의 상태에 영향을 미칩니다.
소품 검증
구성 요소는 소품에 대한 검증 요구 사항을 지정할 수 있습니다. 이 검증 요구 사항이 구성 요소의 API를 형성하여 다른 사람들이 구성 요소를 올바르게 사용하도록하기 때문에 구성 요소가 다른 사람에게 제공 될 때 유용합니다. 현재 소품 값은 검증 요구 사항을 포함하는 객체입니다.
vue.component ( 'example', {props : {// 기본 유형 감지 ( 'null'은 모든 유형을 의미합니다. propd : {type : object, default : function () {return {msg : 'hello'}}}, //이 소품을 양방향 바인딩으로 지정하십시오. // 바인딩 유형이 올바르지 않으면 경고가 전망됩니다. (1.0.12의 신규) // propg를 설정하기 전에 값을 변환합니다. propg : {coerce : function (val) {return val + ''// 값을 문자열로 변환}}}}}}, {coerce : val) {return json.parse (val) // json 문자열을 객체}}}}}).유형은 다음 기본 생성자가 될 수 있습니다.
•끈
•숫자
• 부울
•기능
•물체
•정렬
유형은 인스턴스의 감지를 사용하는 사용자 정의 생성자 일 수도 있습니다.
Prop Verification이 실패하면 Vue는 자식 구성 요소 에서이 값을 설정하지 않으며 개발 버전을 사용하면 경고가 발생됩니다.
부모-자식 구성 요소 커뮤니케이션
부모 링크
자식 구성 요소는 이로 인해 부모 구성 요소에 액세스 할 수 있습니다. $ parent. 루트 인스턴스의 후손은 이것으로 액세스 할 수 있습니다. $ root. 부모 구성 요소에는 배열이 있습니다. $ 어린이는 모든 어린이 요소를 포함합니다.
상위 체인의 인스턴스에 액세스 할 수는 있지만 자식 구성 요소는 부모 구성 요소의 데이터에 직접 의존하지 않고 소품을 사용하여 데이터를 명시 적으로 전달하려고 시도해야합니다. 또한 하위 구성 요소에서 부모 구성 요소의 상태를 수정하는 것은 매우 나쁩니다.
1. 이것은 부모 구성 요소가 아동 구성 요소와 밀접하게 결합 될 수있게합니다.
2. 부모 구성 요소 만 보면 부모 구성 요소의 상태를 이해하기가 어렵습니다. 어린이 구성 요소에 의해 수정 될 수 있기 때문입니다! 이상적으로는 구성 요소 만 상태 자체를 수정할 수 있습니다.
맞춤형 이벤트
VUE 인스턴스는 구성 요소 트리의 통신을위한 사용자 정의 이벤트 인터페이스를 구현합니다. 이 이벤트 시스템은 기본 DOM 이벤트와 무관하며 다르게 사용합니다.
각 vue 인스턴스는 이벤트 트리거입니다.
• $ on ()을 사용하여 이벤트를 듣습니다.
• $ emit ()를 사용하여 이벤트를 트리거합니다.
• $ dispatch ()를 사용하여 이벤트를 배포하고 이벤트는 상위 체인을 따라 기포됩니다.
• $ Broadcast ()를 사용하여 이벤트를 방송하면 이벤트가 모든 후손에게 아래쪽으로 전송됩니다.
DOM 이벤트와 달리 콜백이 명시 적으로 반환되지 않는 한, 버블 프로세스 중에 첫 번째 콜백이 트리거 된 후 VUE 이벤트는 자동으로 버블을 중지합니다.
Simple example:
<!-하위 구성 요소 템플릿-> <템플릿 id = "child-template"> <입력 v-model = "msg"> <버튼 V-on : 클릭 = "notify"> dispatch event </button> </템플릿> <!-부모 구성 요소 템플릿-> <div id = "events-example"> <p> 메시지 : {{message | JSON}}} </p> <child> </hild> </div> // Child Component 등록 // 현재 메시지 보내기 vue.component ( 'child', {template : '#hild-template', data : function () {return {msg : 'hello'}, method : {notify : high (hight (this.msg.trim (this.msg.trim) this.msg) this.msg = ''}}}}) // 메시지가 수신 될 때 이벤트를 배열로 눌러 var parent = new vue ({el : '#events-example', data : {메시지 : []}, // 인스턴스를 생성 할 때``{hilds ''{ 'hild-msg' ': {msg' ':“hilds'{the hilds '{the childs'{the hilds ': {hilds': {hilds '{hilds'{hilds '{the events'는 단순히 호출됩니다. 이 경우 콜백이 등록 된 인스턴스에 자동으로 바인딩됩니다 .messages.push (msg)}})V-ON을 사용하여 사용자 정의 이벤트를 바인딩하십시오
위의 예는 매우 좋지만 "Child-MSG"이벤트가 부모 구성 요소의 코드에서 나오는 위치를 직관적으로 볼 수는 없습니다. 템플릿에서 하위 구성 요소가 사용되는 이벤트 핸들러를 선언하면 더 나을 것입니다. 이 하위 구성 요소의 경우 V-ON을 사용하여 사용자 정의 이벤트를들을 수 있습니다.
<child v-on : child-msg = "handleit"> </child>
하위 구성 요소가 "child-msg"이벤트를 트리거 할 때, 상위 구성 요소의`handing '메소드가 호출됩니다. 상위 구성 요소의 상태에 영향을 미치는 모든 코드는 상위 구성 요소의`handit '메소드에 배치됩니다. 아동 구성 요소는 트리거링 이벤트에만 중점을 둡니다.
하위 구성 요소 인덱스
소품과 이벤트에도 불구하고 때로는 자바 스크립트에서 직접 아동 구성 요소에 액세스해야합니다. 이를 위해 V-Ref를 사용하여 자식 구성 요소의 인덱스 ID를 지정할 수 있습니다. 예를 들어:
<div id = "parent"> <User-Profile v-Ref : profile> </user-profile> </div> var parent = new vue ({el : '#parent'}) // 액세스 자식 구성 요소 var child = parent. $ refs.profileV-REF 및 V-FOR가 함께 사용될 때 Ref는 해당 자식 구성 요소를 포함하는 배열 또는 객체입니다.
슬롯을 사용하여 컨텐츠를 배포하십시오
구성 요소를 사용할 때는 종종 다음과 같이 결합해야합니다.
<app> <app-header> </app-header> <app-footer> </app-footer> </app>
참고 두 가지 점 :
1. <app> 구성 요소는 마운트 포인트에 어떤 컨텐츠가 될지 모릅니다. 마운트 포인트의 내용은 <app>의 상위 성분에 의해 결정됩니다.
2. <app> 구성 요소에는 자체 템플릿이있을 가능성이 높습니다.
구성 요소를 결합하려면 부모 구성 요소의 내용을 자식 구성 요소의 템플릿과 혼합하는 방법이 필요합니다. 이 처리를 컨텐츠 분포 (또는 Angular에 익숙한 경우 "번역")라고합니다. vue.js는 현재 웹 구성 요소 사양 드래프트를 나타내는 컨텐츠 배포 API를 구현하고 원래 컨텐츠의 슬롯으로 특수 <슬롯> 요소를 사용합니다.
컴파일 범위
컨텐츠 배포 API로 뛰어 들기 전에 먼저 컨텐츠 컴파일의 범위를 명확히합니다. 템플릿이 다음이라고 가정합니다.
<HILD-COMPONTE>
{{msg}}
</child-component>
MSG가 부모 구성 요소의 데이터에 바인딩되어야합니까, 아니면 자식 구성 요소에 바인딩해야합니까? 대답은 부모 구성 요소입니다. 구성 요소 범위는 간단합니다.
부모 구성 요소 템플릿의 내용은 부모 구성 요소의 범위 내에서 컴파일됩니다. 자식 구성 요소 템플릿의 내용은 자식 구성 요소의 범위 내에서 컴파일됩니다.
일반적인 실수는 부모 구성 요소 템플릿 내에서 자식 구성 요소의 속성/방법에 지시를 바인딩하는 것입니다.
<!-무효->
<child-component v-show = "SomeChildProperty"> </child-component>
SomeChildProperty가 아동 구성 요소의 속성이라고 가정하면 위의 예는 예상대로 작동하지 않습니다. 상위 구성 요소 템플릿은 자식 구성 요소의 상태를 알지 않아야합니다.
하위 구성 요소의 명령을 구성 요소의 루트 노드에 바인딩하려면 템플릿에서이를 수행해야합니다.
vue.component ( 'child-component', {// 올바른 스코프 템플릿에 있기 때문에 작동합니다 : '<div v-show = "somechildProperty"> child </div>', data : function () {return {somechildProperty : true}}})마찬가지로 분포 내용은 부모 구성 요소의 범위 내에서 컴파일됩니다.
단일 슬롯
자식 구성 요소 템플릿에 <slot>가 포함되어 있지 않으면 부모 구성 요소의 내용이 폐기됩니다. 자식 구성 요소 템플릿에 특성이없는 슬롯이 하나만 있으면 부모 구성 요소의 전체 내용이 슬롯이있는 위치에 삽입되어 교체됩니다.
<Slot> 태그의 내용은 롤백 내용으로 간주됩니다. 폴백 내용은 하위 구성 요소의 범위 내에서 컴파일되며 호스트 요소가 비어 있고 삽입 할 내용이 없을 때 폴백 내용이 표시됩니다.
내 구성 요소 구성 요소에 다음 템플릿이 있다고 가정합니다.
<div> <h1> 이것은 내 구성 요소입니다! </h1> <lot> 배포 된 내용이 없으면 표시됩니다. </slot> </div>
부모 구성 요소 템플릿 :
<내 구성 요소>
<p> 이것은 독창적 인 콘텐츠입니다 </p>
<p> 이것은 더 독창적 인 콘텐츠입니다 </p>
</my-component>
렌더링 결과 :
<div> <h1> 이것은 내 구성 요소입니다! </h1> <p> 이것은 독창적 인 내용입니다 </p> <p> 이것은 더 독창적 인 내용입니다 </p> </div>
명명 된 슬롯
<lot> 요소는 컨텐츠를 배포하는 방법을 구성하기 위해 특수 기능 이름으로 구성 할 수 있습니다. 여러 슬롯마다 이름이 다를 수 있습니다. 명명 된 슬롯은 해당 슬롯 속성이있는 컨텐츠 조각의 요소와 일치합니다.
찾을 수없는 컨텐츠 조각과 일치하는 폴백 슬롯으로서 기본 슬롯 인 익명 슬롯이 여전히있을 수 있습니다. 기본 슬롯이 없으면 이러한 타의 추종을 불허하는 컨텐츠 조각은 폐기됩니다.
예를 들어, 다음과 같은 템플릿이있는 다중 검사 구성 요소가 있다고 가정합니다.
<div> <슬롯 이름 = "one"> </slot> <lot> </slot> <slot name = "two"> </slot> </div>
부모 구성 요소 템플릿 :
<multi-insertion> <p slot = "one"> one </p> <p slot = "two"> 2 </p> <p> 기본값 a </p> </multi-insertion>
렌더링 결과는 다음과 같습니다.
<div> <p slot = "one"> one </p> <p> 기본값 a </p> <p slot = "two"> 2 </p> </div>
컨텐츠 분포 API는 구성 요소를 결합 할 때 매우 유용한 메커니즘입니다.
동적 구성 요소
여러 구성 요소가 동일한 마운트 포인트를 사용한 다음 동적으로 전환 할 수 있습니다. 예약 된 <성분> 요소를 사용하여 IS 속성에 동적으로 바인딩하십시오.
new vue ({el : 'body', data : {currentView : 'home'}, 구성 요소 : {home : {/ * ... */}, 게시물 : {/ * ... */}, 아카이브 : {/ * ... */}}}) <component : is = "currentView">유지하십시오
스위치 아웃 구성 요소가 메모리에 보관되면 유지되거나 다시 렌더링 될 수 있습니다. 이렇게하려면 Keep-Alive Directive 매개 변수를 추가 할 수 있습니다.
<component : is = "currentView"Keep-alive>
<!-비활성 구성 요소가 캐시됩니다->
</구성 요소>
후크를 활성화하십시오
구성 요소를 전환 할 때 구성 요소로 절단하려면 절단하기 전에 일부 비동기 작업이 필요할 수 있습니다. 구성 요소 스위칭 기간을 제어하려면 절단 구성 요소에 활성화 후크를 추가하십시오.
vue.component ( 'activate-example', {activate : function (done) {var self = this loaddataasync (function (data) {self.somedata = data dod ()}}}})활성화 후크는 동적 구성 요소 스위칭 또는 정적 구성 요소 초기화 렌더링 중에 만 작용하며 인스턴스 방법을 사용하여 수동 삽입에 작용하지 않습니다.
전환 모드
전환 모드 기능은 두 개의 동적 구성 요소 전환 방법을 지정하는 데 사용됩니다.
기본적으로 입력하여 전환을 부드럽게 둡니다. 이 기능은 두 가지 다른 모드를 지정할 수 있습니다.
• 인 아웃 : 새로운 구성 요소가 먼저 전환되고 전환이 완료된 후 현재 구성 요소가 전환됩니다.
• 아웃 인 : 현재 구성 요소가 먼저 전환되고 전환이 완료된 후 새로운 구성 요소가 프로세스로 전환됩니다.
예:
<!-먼저 페이드 아웃 다음에 페이드-> <구성 요소 : is = "view"transfition = "fade"전환 모드 = "out-in"> </component> .fade-transition {transition : 불투명도 .3s ease;}. fade-enter, .fade-leave {불투명도 : 0;}.여러 가지 잡다한
구성 요소 및 V-FOR
사용자 정의 구성 요소는 V-For를 일반 요소와 직접 사용할 수 있습니다.
<my component v-for = "항목의 항목"> </my-component>
그러나 구성 요소의 범위가 고아이기 때문에 데이터를 구성 요소로 전달할 수 없습니다. 데이터를 구성 요소에 전달하려면 소품을 사용해야합니다.
<내 성분
v-for = "항목의 항목"
: item = "항목"
: 색인 = "$ index">
</my-component>
항목이 구성 요소에 자동으로 주입되지 않은 이유는 구성 요소가 현재 V-FOR에 단단히 결합되기 때문입니다. 데이터가 어디에서 왔는지, 구성 요소를 위해 다른 곳에서 재사용 할 수있는 위치를 명시 적으로 선언하십시오.
재사용 가능한 구성 요소 작성
구성 요소를 작성할 때는 구성 요소를 재사용할지 기억하는 것이 좋습니다. 일회용 구성 요소를 다른 구성 요소와 밀접하게 결합하는 것과는 아무런 관련이 없지만 재사용 가능한 구성 요소는 명확한 공개 인터페이스를 정의해야합니다.
vue.js 구성 요소 API는 세 부분에서 제공됩니다 : 소품, 이벤트 및 슬롯 :
• PROP는 외부 환경을 통해 데이터를 구성 요소로 전달할 수 있습니다.
• 이벤트는 구성 요소가 외부 환경에서 동작을 트리거 할 수 있도록합니다.
• 슬롯을 사용하면 외부 환경이 구성 요소의 뷰 구조에 컨텐츠를 삽입 할 수 있습니다.
V-BIND 및 V-ON의 약어 구문을 사용하여 템플릿의 압입은 명확하고 간결합니다.
<내 성분
: foo = "baz"
: bar = "qux"
@event-a = "dothis"
@event-b = "dothat">
<!-내용->
<IMG 슬롯 = "아이콘"src = "...">
<p slot = "main-text"> hello! </p>
</my-component>
비동기 구성 요소
대규모 응용 프로그램에서는 응용 프로그램을 작은 조각으로 분할하여 필요한 경우에만 서버에서 다운로드해야 할 수도 있습니다. 상황을 더 쉽게하기 위해 vue.js를 사용하면 구성 요소를 공장 함수로 정의하여 구성 요소의 정의를 동적으로 구문 분석 할 수 있습니다. vue.js는 구성 요소를 렌더링해야 할 때 공장 기능을 트리거하고 나중에 다시 렌더링을 위해 결과를 캐시합니다. 예를 들어:
vue.component ( 'async-example', function (resolve, devrect) {settimeout (function () {resolve ({template : '<div> I am async! </div>'})}, 1000)}).공장 함수는 서버에서 다운로드 한 구성 요소 정의가 수신 될 때 호출되는 Resolve 콜백을 수신합니다. 로딩이 실패했음을 나타 내기 위해 Reject (이유)에 전화 할 수도 있습니다. 여기에서 settimeout은 시연용입니다. 구성 요소를 얻는 것은 전적으로 귀하에게 달려 있습니다. WebPack에서 권장 코드 분할 기능 :
vue.component ( 'async-webpack-example', function (resolve) {//이 특수 요구 구문은 // 컴파일 된 코드를 다른 블록으로 자동으로 분할합니다. //이 블록은 ajax 요청을 통해 자동으로 다운로드됩니다 ([ './ my-async-component', resolve)}).자원 명명 규칙
구성 요소 및 지침과 같은 일부 리소스는 템플릿에 HTML 속성 또는 HTML 사용자 정의 요소로 나타납니다. HTML 속성 및 태그 이름의 이름은 대소 문자에 민감하지 않기 때문에 자원의 이름은 일반적으로 Camelcase 대신 케밥 사례의 형태를 사용해야합니다.
vue.js는 Camelcase 또는 Pascalcase 형태의 리소스 이름을 지원하고 템플릿의 Kebab-Case로 자동 변환합니다 (Prop의 이름 지정 규칙과 유사).
// 구성 요소 정의 구성 요소에서 : {// camelcase 양식으로 MyComponent를 등록하십시오. {/ *... */}} <!-템플릿에서 케밥-케이스 양식을 사용하여-> <my-component> </my-component> es6 문자 그럴 약어도 미세입니다 : // pascalcaseimport textbox './components/text-boxpox-boxpoxponents/texponents/texponents/texcalponents/texponents/texponents/tecport-bbox './components/dropdown-menu'; expport default {구성 요소 : {// write <text-box> 및 <dropdown-menu> textbox, dropdownmenu}}}재귀 구성 요소
구성 요소는 템플릿 내에서 재귀 적으로 호출 할 수 있지만 이름 옵션이있는 경우에만 가능합니다.
var stackoverflow = vue.extend ({name : 'stack-overflow', 템플릿 : '<div>' + // 자체적으로 '<Stack-OverFlow> </stack-overflow>' + '</div>'}에서 재귀 적으로 호출위의 구성 요소는 "최대 스택 크기 초과"오류가 발생하므로 재귀 호출에 종료 조건이 있는지 확인하십시오. vue.component ()를 사용하여 구성 요소가 전역으로 등록되면 구성 요소 ID가 자동으로 구성 요소의 이름 옵션으로 설정됩니다.
조각 인스턴스
템플릿 옵션을 사용하는 경우 템플릿의 내용은 인스턴스의 마운트 요소를 교체합니다. 따라서 권장 템플릿의 최상위 요소는 항상 단일 요소입니다.
다음과 같이 템플릿을 쓰지 마십시오.
<div> 루트 노드 1 </div>
<div> 루트 노드 2 </div>
이것을 작성하는 것이 좋습니다.
<div>
나는 단일 루트 노드를 가지고있다!
<div> 노드 1 </div>
<div> 노드 2 </div>
</div>
다음 상황은 인스턴스를 조각난 인스턴스로 전환합니다.
1. 템플릿에는 여러 최상위 요소가 포함되어 있습니다.
2. 템플릿에는 일반 텍스트 만 포함되어 있습니다.
3. 템플릿에는 다른 구성 요소 만 포함됩니다 (다른 구성 요소는 조각 인스턴스 일 수 있음).
4. 템플릿에는 vue-router의 <partial> 또는 <router-view>와 같은 하나의 요소 지시 사항 만 포함됩니다.
5. 템플릿 루트 노드에는 V-IF 또는 V-FOR와 같은 프로세스 제어 명령이 있습니다.
이러한 경우에 인스턴스에 알 수없는 수의 최상위 요소가있게되며, 이는 DOM 컨텐츠를 단편으로 처리합니다. 조각 인스턴스는 여전히 컨텐츠를 올바르게 렌더링합니다. 그러나 루트 노드가 없으며 $ el은 앵커 노드, 즉 빈 텍스트 노드 (개발 모드의 주석 노드)를 가리 킵니다.
그러나 더 중요한 것은 비 프로세스 제어 지침, 비 프로그램 기능 및 구성 요소 요소의 전환이 바인딩에 대한 루트 요소가 없기 때문에 무시됩니다.
<!-아니요, 루트 요소가 없기 때문에->
<example v-show = "ok"thrownition = "fade"> </example>
<!-소품 예->
<예제 : prop = "somedata"> </example>
<!-프로세스 제어는 괜찮지 만 전환은 없습니다->
<예제 v-if = "ok"> </example>
물론, 조각 인스턴스는 사용이 있지만 일반적으로 구성 요소에 루트 노드를 제공하는 것이 좋습니다. 구성 요소 요소에 대한 지침과 특수 성능이 올바르게 변환되도록하고 성능도 약간 더 좋습니다.
인라인 템플릿
하위 구성 요소에 인라인-템플릿 속성이있는 경우 구성 요소는 컨텐츠를 분포 내용으로 취급하는 대신 템플릿으로 처리합니다. 이렇게하면 템플릿을보다 유연하게 만듭니다.
<my component inline-template>
<p> 이들은 구성 요소 자체 템플릿으로 컴파일됩니다 </p>
<p> 부모의 번역 내용이 아닙니다. </p>
</my-component>
그러나 Inline-Template은 템플릿의 범위를 이해하기 어렵게 만들고 템플릿 컴파일 결과를 캐시 할 수 없습니다. 모범 사례는 템플릿 옵션을 사용하여 구성 요소 내에서 템플릿을 정의하는 것입니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.