이 정보는 공식 문서에서 나옵니다 : 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> "}); </script>설명 :
상위 구성 요소의 버튼을 클릭하면 자동으로 하위 구성 요소를 표시하도록 자동으로 전환됩니다 (변수 값 _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 초를 기다려야합니다. }}}); </script>코드 효과 :
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]; 데이터 : function () {return {return {hello : ""}}}, 셋째 : {// 세 번째 자식 구성 요소 템플릿 : "<div> 여기에 자식 구성 요소가 있습니다 3 </div>"}}}); </script>이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.