구성 요소는 무엇입니까?
구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화 할 수 있습니다. 더 높은 수준에서 구성 요소는 사용자 정의 요소이며 Vue.js의 컴파일러는 특수 기능을 추가합니다. 경우에 따라 구성 요소는 IS 기능으로 확장 된 기본 HTML 요소의 형태 일 수도 있습니다.
이 기사는 공식 문서를 기반으로 편집자가 편집 한 더 자세한 설명입니다. 이 코드는 더 완벽하고 완벽하며 초보자가 배우는 데 매우 적합합니다.
공식 문서 :
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
동적 구성 요소는 다음과 같습니다.
simple :
이는 여러 구성 요소가 마운트 포인트 아래에 배치 된 다음 부모 구성 요소의 변수를 기반으로 표시 할 정보를 결정하거나 그 중 어느 것도 표시되지 않음을 의미합니다.
② 동적 스위치 :
마운트 포인트에서 구성 요소 태그를 사용한 다음 v-bind : is = "구성 요소 이름"을 사용하여 일치하는 구성 요소 이름을 자동으로 찾으십시오. 그렇지 않으면 표시되지 않습니다.
장착 구성 요소를 변경하려면 IS 지침의 값 만 수정하면됩니다.
예제 코드에서와 같이 :
<div id = "app"> <button @click = "toshow"> 자식 구성 요소 디스플레이를 클릭하여 클릭하여 </button> <구성 요소 v-bind : is = "what_to_show"> </component> </div> <cript> var vm = new vue ({el : '#app', data : who whith_to_show : "first"}, methods : {toshow : function (function). [ "첫 번째", "세 번째", "]; 1 </div> "}, 두 번째 : {// 두 번째 자식 구성 요소 템플릿 :"<div> 여기에 자식 구성 요소 2 </div> "}, 세 번째 : {// 세 번째 자식 구성 요소 템플릿 :"<div> 여기 자식 구성 요소 3 </div> "},}); </스크립트>설명 :
상위 구성 요소의 버튼을 클릭하면 자동으로 하위 구성 요소를 표시하도록 자동으로 전환됩니다 (변수 값 _to_show 값을 기준으로 결정).
③ 계속하십시오
간단히 말해서, 전환 된 구성 요소 (현재 표시되지 않음)는 직접 제거됩니다.
부모 구성 요소에서 $ children 속성을 보면, 자식 구성 요소가 존재하면 속성의 길이가 1이고 자식 구성 요소가 존재하지 않으면 속성의 길이가 0이라는 것을 알 수 있습니다 (자식 구성 요소는 얻을 수 없습니다).
하위 구성 요소를 전환 해야하는 경우 다음에 나타날 때 다시 렌더링을 피하기 위해 메모리에 유지해야합니다. 그런 다음 구성 요소 태그에 Keep-Alive 속성을 추가해야합니다.
코드로 :
<div id = "app"> <button @click = "toshow"> 자식 구성 요소 디스플레이를 클릭하여 클릭하여 </button v-bind : is = "what_to_show"keep-alive> </component> </div> <cript> var vm = new vue ({el : '#app', data : {what_to_show : "{whiter (whipter) var arr = "두 번째", "세 번째", "]; 첫 번째 자식 구성 요소 템플릿 : "<div> 여기에 자식 구성 요소 1 </div>"}, 두 번째 : {// 두 번째 아동 구성 요소 템플릿 : "<div> 여기에 자식 구성 요소 2 </div>"}, 세 번째 : {// 세 번째 자식 구성 요소 템플릿이 있습니다. </스크립트>설명 :
초기의 경우 vm. $ children 속성에는 하나의 요소 (첫 번째 구성 요소) 만 있습니다. 전환 할 버튼을 클릭 한 후 Vm. $ children 속성에는 두 가지 요소가 있습니다. 다시 전환 한 후 세 가지 요소가 있습니다 (3 개의 하위 구성 요소는 모두 메모리에 유지됩니다).
그 후, 어떻게 전환하든 세 가지 요소가 있습니다.
hook 활성화
간단히 말해서 게으른 하중입니다.
예를 들어, AJAX 요청을 시작할 때는 얼마 동안 기다려야합니다. AJAX 요청이 완료된 후로드 해야하는 경우 활성화 후크를 사용해야합니다.
특정 사용과 관련하여 Activate는 템플릿 및 데이터와 같은 속성과 동일한 수준의 속성입니다. 양식은 함수입니다. 기능에는 기본적으로 매개 변수가 있습니다. 이 매개 변수는 함수입니다. 구성 요소는이 기능이 실행될 때만 전환됩니다.
서버 측에서 지연로드를 증명하기 위해 특정 AJAX 요청이 시작되면 컨텐츠를 반환하기 전에 2 초가 지연됩니다. 따라서 구성 요소 2를 처음으로 전환 할 때는 성공적으로 전환하기 전에 2 초를 기다려야합니다.
<div id = "app"> <button @click = "toshow"> 자식 구성 요소 디스플레이를 클릭하여 클릭하여 </button> <구성 요소 v-bind : is = "what_to_show"> </component> </div> <cript> var vm = new vue ({el : '#app', data : who whith_to_show : "first"}, methods : {toshow : function (function). [첫 번째 ","세 번째 ","]; 템플릿 : "<div> 여기에 자식 구성 요소 1 </div>"}}, 두 번째 : {// 두 번째 자식 구성 요소 템플릿 : "<div> 여기에 ajax 다음 내용은 다음과 같습니다. ajax : {{hello}} </div>", data : function () {return {hello : "}}, function (done : // when var self = this; "/test", function (data) {// 서버 측 에서이 ajax의 지연을 수동으로 설정하기 때문에 self.hello = data; dode (); // ajax를 성공적으로 실행하기 전에 2 초를 기다려야합니다. }}}); </스크립트>코드 효과 :
component 2로 전환하면 처음으로 구성 요소 2로 전환 할 때 표시되기 전에 2 초를 기다려야합니다 (Ajax가 시작되기 때문에).
[2] Keep-Alive의 경우, 구성 요소 2로 전환 할 때 두 번째 또는 그 후에 대기 할 필요가 없습니다. 그러나 Ajax 컨텐츠는 Ajax가 처음 시작된 후 2 초 후에 표시해야합니다.
【3 keep keep-alive가 없으면 (전환 후 메모리에 저장되지 않음) 구성 요소 2로 전환 할 때는 두 번째로 기다려야합니다.
[4] 대기 할 때는 다시 전환에 영향을 미치지 않습니다 (즉, 구성 요소 2를 기다릴 때 다시 클릭하여 다시 전환하여 구성 요소 3으로 직접 전환);
설명 :
component가 처음으로 구성 요소를 렌더링 할 때만 활성화가 실행되고 함수는 한 번만 실행됩니다 (구성 요소가 나타날 때 구성 요소가 지연됨).
【2 there keep-alive가 없으면 스위치 구성 요소가 나타날 때마다 다시 렌더링됩니다 (이전에 숨겨져있을 때 파괴 프로세스가 실행되었으므로) 활성화 메소드가 실행됩니다.
transition- 모드 전환 모드
간단히 말하면 동적 구성 요소를 애니메이션으로 변경하십시오. (전환 섹션의 지침을 기억하면 전환은 동적 구성 요소에 적합합니다).
기본적으로 입력 및 출구가 함께 완료됩니다. (입력하는 내용은 출구 내용 아래에 나타날 수 있으며,이 축의 하단을 나타냅니다. 종료 후에는 항목이 올바른 위치에 나타납니다);
Transition-Mode = "Out-In"인 경우 애니메이션은 먼저 종료 한 다음 입력됩니다.
Transition-Mode = "in-out"인 경우 애니메이션은 먼저 및 나중에 나중에 있습니다 (기본값에서 발생하기 쉬운 문제와 동일);
샘플 코드 : (사용자 정의 전환 이름 및 Animate.css 파일 사용)
<div id = "app"> <button @click = "toshow"> 자식 구성 요소 디스플레이를 클릭하여 클릭하여 </button> <구성 요소 v-bind : is = "what_to_show"transition = "bounce"transition-mode = "out-in"> </component> </div> <script> vue.transition ( "bounce", {enterclass : 'leaveclast', leaveclast : }) var vm = new vue ({el : '#app', data : {what_to_show : "first"}, method : {toshow : {toshow : {// component switch component display var arr = [ "first", "second", "three", ""]; var index = arr.indexof (this.which_to_show); if (this.which_to_show); 1]; data : function () {return {return {hello : ""}}}, 셋째 : {// 세 번째 자식 구성 요소 템플릿 : "<div> 여기 자식 구성 요소 3 </div>"}}}); </스크립트>위는 편집자가 소개 한 Vuejs의 12 번째 장의 역동적 인 구성 요소입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!