상세 설명 VueJs 비동기 동적 로드 블록

1488 단어 vue비동기로드
우선 구성 요 소 를 비동기 로드 로 정의 합 니 다.

define(['jquery','vue'],function($,Vue){ 
  Vue.component('comp1',function(resolve){ 
    require(['component/comp1'],resolve); 
  }); 
  Vue.component('comp2',function(resolve){ 
    require(['component/comp2'],resolve); 
  }); 
  var b = new Vue({ 
    el:"#app", 
    data:{ 
      currentView:'comp1' 
    }, 
    methods:{ 
      toggleView:function(){ 
        console.log(this.currentView); 
        this.currentView = this.currentView=='comp1'?'comp2':'comp1'; 
      } 
    } 
  }); 
})
구체 적 으로 vuejs 의 비동기 구성 요소 와 동적 구성 요 소 를 참고 할 수 있 습 니 다.그리고 html 에 있 는 코드.

<div id="app"> 
    <keep-alive><!--   keep-alive                    （       ），                 --> 
    <component v-bind:is="currentView"></component> 
    </keep-alive> 
    <button type="button" v-on:click="toggleView">  view</button> 
  </div>
이러한 구조의 장점 은 페이지 가 로 딩 을 초기 화 할 때 필요 한 구성 요소 와 관련 된 내용 만 불 러 오고 전환 되 지 않 은 구성 요 소 는 로 딩 하지 않 아 페이지 로 딩 속도 가 빨 라 집 니 다.또한,각 구성 요소 가 한 번 불 러 온 후에 다시 자 르 기 를 바 꾸 면 관련 내용 을 불 러 오고 렌 더 링 을 반복 하지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
c++에서 관련 수학 함수 처리
C++기본 알고리즘 거품 법,교환 법,선택 법,코드 집합 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage