Vue 학습 의 구성 요소 사용법 실례 상세 설명

이 글 의 실례 는 Vue 학습 의 구성 요소 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
Vue 의 모듈 화,코드 블록 을 다시 사용 하여 페이지 를 하나의 기능 구성 요소 로 세분 화하 고 구성 요소 간 에 끼 워 넣 을 수 있 습 니 다.구성 요 소 는 전역 구성 요소 와 부분 구성 요소 로 나 뉘 어 있 으 며,부분 구성 요 소 는 인 스 턴 스 에 등록 되 어 있 으 며,이 인 스 턴 스 에 만 적용 할 수 있 습 니 다.
1.구성 요소 의 사용 절차:

  //1、       
    let overallDiv=Vue.extend({
      template:`
        <div>
          <p>        div</p>
        </div>
      `
    });
  //2、      
    Vue.component('overall-div',overallDiv);
  //3、   ,         div     ，           
    let vue=new Vue({
      el:'#app',
      data:{},
    //          ，              
    components:{
      'local-div':{
        template:
          ` <div>
              <p>        div</p>
           </div>
          `
      }
    },
    methods:{
    }
    });

HTML 페이지 의 실례 화 된 div 에서 구성 요 소 를 사용 합 니 다:

  <div id="app">
    <local-div></local-div>
    <overall-div></overall-div>
  </div>

메모:일부 HTML 탭 은 넣 을 탭 에 제한 이 있 습 니 다.이 때 는 is 속성 을 통 해 구성 요 소 를 넣 을 구성 요소 로 바 꿔 야 합 니 다.예 를 들 어

탭 아래 에
• 만 넣 을 수 있 습 니 다.이 때 는
• 탭 을 넣 은 것 과 같 습 니 다.
  2.템 플 릿 템 플 릿
  구성 요소 의 템 플 릿 은 js 에서 만 드 는 것 외 에 페이지 의 template 를 사용 하여 템 플 릿 을 만 들 수 있 습 니 다.페이지 의 템 플 릿 은 하나의 루트 요소 만 있 을 수 있 습 니 다.예 를 들 어 페이지 body 의 템 플 릿 등 여러 요소 가 하나의 div 에 포함 되 어야 합 니 다.

  
    <template id="myTmp">
      <div>
        <p>        </p>
      </div>
    </template>
  
  

  js 에서 id 번 호 를 통 해 템 플 릿 을 등록 합 니 다.

  
    Vue.component('my-tmp',{
      template:'#myTmp'
    });
  
  

  3.구성 요소 의 data
  구성 요소 에서 data 를 사용 하려 면 함수 로 되 돌려 야 합 니 다.속성 값 으로 존재 하면 모든 구성 요소 가 하나의 속성 값 을 공유 하고 그 중 하 나 를 변경 하면 모든 구성 요소 가 영향 을 받 습 니 다.예 를 들 어 클릭 횟수 를 집계 하 는 구성 요소:

  
    <template id="myBtn">
      <div>
        <button @click="count++">     {{count}} </button>
      </div>
    </template>
  
  

  
    Vue.component('my-btn',{
      template:'#myBtn',
      data () {    //               data
        return {
          count:0
        };
      }
    });   
    <div id="app">
      <my-btn></my-btn>
      <my-btn></my-btn>
    </div>
  
  

  페이지 에서 각각 두 개의 단 추 를 누 르 면 두 개의 단추 구성 요소 의 count 는 각각 계산 되 며 서로 간섭 하지 않 습 니 다.
  
  4.부자 구성 요소
  먼저 하위 구성 요 소 를 만 든 다음 에 부모 구성 요소 에 등록 하면 부모 구성 요소 의 템 플 릿 에서 하위 구성 요 소 를 사용 한 다음 에 부모 구성 요 소 를 등록 할 수 있 습 니 다.그러면 외부 에서 하위 구성 요 소 를 포함 한 부모 구성 요 소 를 호출 할 수 있 습 니 다.외부 에 서 는 부모 구성 요소 인 터 페 이 스 를 직접 사용 할 수 있 습 니 다.내부 하위 구성 요소 의 실현 을 알 필요 가 없습니다.
  외부 에 서 는 하위 구성 요 소 를 직접 사용 할 수 없습니다.부모 구성 요소 에 만 등록 되 어 있 기 때문에 외부 에 서 는 하위 구성 요 소 를 볼 수 없습니다.

  
    let child1=Vue.extend({
      template:`<div>     1</div>`
    });
    let child2=Vue.extend({
      template:`<div>     2</div>`
    });
    Vue.component('parent',{
      components:{
        'c1':child1,
        'c2':child2
      },
      //          
      template:`<div>   <c1></c1><c2></c2></div>`
    });
    <div id="app">
      <parent></parent>
    </div>
  
  

  결 과 는 그림 과 같다.
  
  5.슬롯 슬롯 슬롯
  생활 속 의 용기 처럼 slot 는 태그,구성 요소 등 내용 을 삽입 하고 외부 에 상자 포장 을 제공 할 수 있 습 니 다.slot 는 익명 슬롯 과 실명 슬롯 으로 나 뉘 는데 익명 슬롯 은 그 안에 모든 종류의 내용 을 삽입 할 수 있다.
  실명 슬롯 은 지정 한 슬롯 에 내용 을 삽입 할 수 있 습 니 다.예 를 들 어 컴퓨터 의 메인보드,cpu,메모리 바 는 각각 해당 하 는 슬롯 이 있 습 니 다.실명 슬롯 은 템 플 릿 에서 name 속성 을 통 해 슬롯 의 이름 을 규정 하고 사용 할 때 탭 의 슬롯 속성 을 통 해 해당 하 는 name 을 지정 합 니 다.탭 을 지정 한 슬롯 에 삽입 할 수 있 습 니 다.
  익명 슬롯

  
    <!--    -->
    <template id="anonymousDiv">
      <div style="width: 20%;">
        <h3>      </h3>
        <slot>        </slot>
        <hr/>
        <p>    </p>
      </div>
    </template>
    let vue2=new Vue({
      el:'#app2',
      data:{
      },
      components:{
       //      
       'anonymous-slot':{
         template:'#anonymousDiv'
       },
       //      
       'realname-slot':{
         template:'#realnameDiv'
       }
      }
    });
  
  

  cpu 슬롯 에 내용 삽입:

  
    <div id="app2">
      <anonymous-slot>
        <p>          </p>
      </anonymous-slot>
    </div>
  
  

  슬롯 에 내용 을 넣 지 않 았 을 때:텍스트 삽입:
  
  실명 슬롯

  
  <template id="realnameDiv">
  <div>
    <h3>      </h3>
    <slot name="cpu">  cpu  </slot>
    <slot name="memery">       </slot>
    <slot name="HardDisk">      </slot>
  </div>
  </template>
  <realname-slot>
    <p slot="cpu">Intel Core i5</p>
  </realname-slot>
  
  

  결과:cpu 는 지정 한 슬롯 에 넣 었 고 다른 슬롯 은 영향 을 받 지 않 았 습 니 다.
  
  본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.