구성 요소는 무엇입니까?
구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화 할 수 있습니다. 더 높은 수준에서는 구성 요소가 사용자 정의 요소이며 Vue.js의 컴파일러는 특수 기능을 추가합니다. 경우에 따라 구성 요소는 IS 기능으로 확장 된 기본 HTML 요소의 형태 일 수도 있습니다.
이 기사는 공식 문서를 기반으로 편집자가 편집 한 더 자세한 설명입니다. 이 코드는 더 완벽하고 완벽하며 초보자가 배우는 데 매우 적합합니다.
공식 문서 :
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
구성 요소 - 기타 항목은 다음과 같이 자세히 설명합니다.
components 및 v-for
간단히 말해서, 구성 요소는 여러 번 재사용됩니다.
예를 들어, 테이블의 특정 행 또는 전자 상거래 제품 창 디스플레이 (단일 창)는 재사용 할 수있는 구성 요소가 될 수 있습니다.
그 중 하나를 구성 요소로 작성한 다음 데이터 소스를 배열 (또는 객체로 만들지만 개인적으로 배열이라고 생각합니다). V-For Traversal을 통해 구성 요소의 각 인스턴스는 배열 중 하나를 얻을 수 있으므로 모든 구성 요소를 생성 할 수 있습니다.
멀티플렉싱으로 인해 트래버스 결과 I 및 소품에 결합 된 데이터를 바인딩하기 위해 소품을 사용해야합니다. 바인딩 방법은 일반 형태와 동일하며 템플릿에 바인딩됩니다.
샘플 코드 :
<div id = "app"> <button @click = "toknowchildren"> 자식 구성 요소 디스플레이를 클릭하여 클릭하여 </button> <table> <td> index </td> <td> id </td> <td> description </td> </tr> <tr은 "v-bor ="v-bind : id = ""i index "": id "": index = "I indelic </div> <cript> var vm = new vue ({el : '#app', data : {항목 : [1, 2, 3, 4], 메소드 : {toknowchildren : function () {// 구성 요소 디스플레이 console.log (this. $ children);}}, components : {theT : <tr> " +. "<td> {{index}} </td>" + "<td> {{id}} </td>" + "<td> 이것은 자식 구성 요소 </td>" + "</tr>", 소품 : [ 'id', 'index'}}}); </스크립트>설명 :
【1 to 데이터를 소품으로 전달하도록하는 것을 잊지 마십시오!
인덱스가 0에서 시작되므로 인덱스가 0으로 시작되므로 인덱스와 인덱스 $ index를 바인딩합니다. ID는 항목을 가로 지르는 I에 묶여 있으므로 ID는 1에서 시작합니다.
[3]이를 통해 아동 구성 요소를 얻을 수 있습니다. $ 부모 구성 요소의 어린이 (그러나 특히 많은 구성 요소가있을 때는 찾기가 어렵습니다).
② 재사용 가능한 구성 요소 작성 :
간단히 말해서, 단일 사용 구성 요소 (여기서만 사용되는 재사용하지 않음)가 다른 구성 요소와 밀접하게 연결되어있을 수 있지만 재사용 가능한 구성 요소는 명확한 공개 인터페이스를 정의해야합니다. (그렇지 않으면 다른 사람들이 그것을 어떻게 사용합니까?)
재사용 가능한 구성 요소는 기본적으로 외부와 상호 작용해야하며 구성 요소 및 외부 공개 된 대화식 인터페이스에는 다음이 포함됩니다.
props : 외부 환경 데이터를 구성 요소로 전달할 수 있습니다.
【2 : 이벤트 : 구성 요소가 외부 환경의 동작을 트리거하도록 허용, 즉 마운트 포인트에서 V-ON 지시문을 추가함으로써 부모 구성 요소의 메소드가 아동 구성 요소의 이벤트가 트리거 될 때 동시에 트리거됩니다.
[3] 슬롯 : 분포, 부모 구성 요소의 내용을 아동 구성 요소의 뷰 구조에 삽입 할 수 있습니다.
코드로 :
<div id = "app"> <p> 이것은 첫 번째 부모 구성 요소입니다. </p> <위젯 : value = "test" @some = "todo"> <span> <삽입 된 첫 번째 부모 구성 요소의 내용 </span> </widget> </div id = "app2"> <p> 두 번째 상위 구성 요소 </p> </dig> <cript> vue.component ( "위젯", {템플릿 : "<button @click = 'dosomething'> <slot> </slot> 이것은 재사용 된 구성 요소이며, 클릭 {{value}} </button>", 메소드 : {dosomething : () {this. $ emit ( "some"), {some : some (function) {)} console.log ( "위젯 클릭"); var vm_other = new vue ({el : '#app2', data : {name : "first"}, method : {todo : function () {console.log ( "이것은 다른 부모 구성 요소")}); </스크립트>설명 :
[1] 분포 슬롯은 첫 번째 부모 구성 요소에서 사용되며 소품은 값을 전달하는 데 사용됩니다 (테스트 값을 자식 구성 요소의 값으로 전달).
[2] 두 구성 요소 중에서, 하위 구성 요소를 클릭 한 후, 방법의 복용 방법을 클릭 한 다음 이벤트의 일부 이벤트가 실행됩니다. 그런 다음, Mount Point @node = "todo"를 통해 어린이 구성 요소의 일부 이벤트와 상위 구성 요소의 TODO 메소드를 결합시킵니다.
따라서 자식 구성 요소를 클릭 한 후 부모 구성 요소의 TODO 방법이 결국 실행됩니다.
[3] 상위 구성 요소의 아동 구성 요소로 전달 된 값을 변경하면 아동 구성 요소의 값이 동기 변경됩니다 (즉, 둘 다 데이터 바운드).
sync 구성 요소 :
내 이해에 따르면, 간단히 말해서, 큰 응용 프로그램에는 여러 구성 요소가 있지만 일부 구성 요소는 즉시로드 할 필요가 없으므로 여러 구성 요소로 분할됩니다 (예 : 즉시로드해야하지만 즉시로드하지는 않습니다).
즉시로드 해야하는 경우 동일한 파일에 넣거나 동일한 배치로 함께 요청하는 것이 좋습니다.
즉시로드 할 필요가 없으면 다른 파일에 배치 할 수 있지만 필요한 경우 Ajax는 서버에 요청합니다.
다음 요청은 비동기 구성 요소입니다.
vue.js의 기능은 vue.js의 함수로 구성 요소를 공장 함수로 정의하고 구성 요소의 정의를 동적으로 구문 분석 할 수 있습니다.
웹 팩과 함께 사용할 수 있습니다.
자세히 사용하는 방법에 관해서는 이해하지 못합니다. 튜토리얼에 명확하게 쓸 수 없으므로 제쳐두고 필요할 때 공부할 때까지 기다릴 것입니다.
링크:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
Resource 이름 지정 규칙 :
간단히 말해서, HTML 태그 (예 : div 및 div와 같은) 및 기능 (예 : VON 대신 V-ON과 같은 쓰기 지침)은 대소 문자를 사용하지 않습니다.
자원 이름은 종종 낙타와 같은 (예 : 낙타 낙타와 같은) 또는 단어의 첫 글자의 대문자 형태로 작성됩니다 (예 : Pascalcase와 같은, 나는 이것을 무엇이라고 부를지 모르겠지만 거의 쓰지 않습니다).
vue.component ( "mytemplate", {// ...... 생략})vue.js는 이것을 자동으로 인식하고 변환 할 수 있습니다.
<my-template> </my-template>
위의 템플릿은이 태그를 자동으로 교체 할 수 있습니다.
componics :
간단히 말해, 재귀 구성 요소는 자체 템플릿을 자체적으로 포함시키는 구성 요소입니다.
구성 요소가 재발하려면 이름 속성이 필요하고 vue.component에는 자체 이름 속성이 있습니다.
아마 이것은 이렇게 보일 것입니다.
<div id = "app"> <my-template> </my-template> </div> <cript> vue.component ( "mytemplate", {template : "<p> <my-template> </my-template> </p>"})이것은 무한 재귀이며, 확실히 불가능합니다. 따라서 재귀 계층의 수를 제어 할 필요가 있습니다. 예를 들어, 데이터를 통한 재귀를 제어하고 데이터가 비어있을 때 재귀를 중지해야합니다.
샘플 코드는 다음과 같습니다.
<ul id = "app"> <li> {{b}} </li> <my-template v-if = "a": a = "aa": b = "ab"> </my-template> </ul> <cript> vue.component ( "mytemplate", {emplate : '<ul> <li> {{b}} <my-li/li>> <my-li plate. : a = "aa": b = "ab"> </my-template> </ul> ', props : [ "a", "b"}) var data = {a : {a : {a : {a : 0, b : 3}, b : 2}, b : 1} v vm = new vue ({el :'#app ', 데이터 : {function (function :). += "!"; console.log (this.test); </스크립트>설명 :
[1] 통과 할 때, A의 값과 B의 값은 소품을 통과하며, 여기서 A의 값은 재귀 후 구성 요소의 A와 B의 값에 대한 데이터 소스로 사용된다.
그런 다음 재귀 구성 요소에 전달 된 값이 존재하는지 여부를 결정하고 그렇다면 계속 되풀이됩니다.
A의 값이 존재하지 않으면 재귀가 중지됩니다.
⑥ 프레임 예 :
간단히 말해서, 소위 조각 인스턴스는 구성 요소의 템플릿이 루트 노드 아래에 있지 않음을 의미합니다.
조각 인스턴스 코드 :
vue.component ( "mytemplate", {template : '<div> 1 </div>' + '<div> 2 </div>',})비 배제 인스턴스 :
vue.component ( "mytemplate", {template : '<div>' + '<div> 1 </div>' + '<div> 2 </div>' + '</div>',})조각 인스턴스의 다음 특성은 무시됩니다.
[1] 부품 요소에 대한 비 프로세스 제어 지침 (예 : 마운트 포인트에서 작성되고 부모 구성 요소에 의해 제어되는 V-Show 명령어와 같은 V-IF는 프로세스 제어 지침에 속합니다);
【2 -pr 비 프로그램 기능 (소품은 무시되지 않으며 소품이 마운트 포인트에 기록됩니다);
[3] 전환 (즉, 전환 속성은 무시 될 것입니다);
공식 문서에 대한 자세한 내용 :
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
line 템플릿
참조 : http://cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
위는 vuejs 13 장의 구성 요소입니다. 편집자가 귀하에게 소개 한 기타 항목입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!