ABOUT ME

    -

    오늘 방문자
    -
    어제 방문자
    -
    전체
    -
    • [Vue.js] Vue 컴포넌트란?
      Vue 2019. 1. 13. 21:04

      Vue 컴포넌트란?

      조합하여 화면을 구성할 수 있는 블록을 말함



      vue 컴포넌트의 장점?

      => 빠르게 구조화하여 일괄적인 패턴으로 개발 가능



      전역 컴포넌트 사용방법


      전역 컴포넌트 

      - .component()를 호출한다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <html>
        <head>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
          <meta charset="utf-8">
          <title></title>
        </head>
        <body>
          <div id="app">
              <button>등록</button>
              <my-component><my-component>
          </div>
          <script>
            Vue.component('my-component',{ // 전연 컴포넌트 등록
              template : '<div> 전역컴포넌트 등록완료! </div>'
            });
       
            new Vue({
              el: '#app'
            });
          </script>
        </body>
      </html>
       
      		cs


      전역 컴포넌트가 화면에 나타나는 과정

      1. 뷰 라이브러리 파일 로딩

      2. 뷰 생성자로 컴포넌트 등록

      3. 인스턴스 객체 생성

      4. 특정화면 요소에 인스턴스 부착

      5. 인스턴스 내용반환







      지역 컴포넌트 사용방법

      전역 컴포넌트와 다르게 인스턴스에 components 속성을 추가함


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
        <head>
          <meta charset="utf-8">
          <title></title>
          <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
        </head>
        <body>
          <div id="app">
              지역 컴포넌트 테스트~
              <local-component></local-component>
          </div>
       
          <script>
            var data = {
                template : '<div> 지역 컴포넌트입니다 ^^ </div>'
            }
       
            new Vue({
              el:"#app",
              components:{
                            'local-component' : data
                         }
            });
          </script>
        </body>
      </html>
       
      		cs




      컴포넌트의 유효범위

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script>
      </head>
      <body>
        인스턴스 유효범위와 지역,전역 컴포넌트 간의 관계 테스트
        <hr>
        <div id="app1">
            app1 구역
            <global-component></global-component>
            <local-component></local-component>
        </div>
        <hr>
        <div id="app2">
            app2 구역
            <global-component></global-component>
            <local-component></local-component>
        </div>
        <script>
          var data = {
              template : '<div> 지역 컴포넌트입니다 ^^ </div>'
          }
          //전역 컴포넌트 생성
          Vue.component('global-component',{
            template :'<div> 전역 컴포넌트입니다 ^^ </div>'
          })
          //첫번째 인스턴스
          new Vue({
            el:"#app1",
            components:{
                          'local-component' : data
                       }
          });
          //두번째 인스턴스
          new Vue({
            el:"#app2",
          });
        </script>
      </body>
      </html>
       
      		cs





      결과





      위 내용을 보면 지역 컴포넌트와 전역 컴포넌트의 차이점은


      지역 컴포넌트는 특정 인스턴스에 대해서만 유효한 범위를 가지고

      전역 컴포넌트는  여러 인스턴스에 대해서 사용이 가능하다.

      요게 핵심.







      'Vue' 카테고리의 다른 글

      [Vue.js] 네임드뷰  (0) 2019.01.21
      [Vue.js] Vue 라우터란?  (2) 2019.01.20
      [Vue.js] Vue 컴포넌트 데이터 주고 받기  (0) 2019.01.14
      [Vue.js] Vue 인스턴스의 라이프 사이클  (0) 2019.01.13
      [Vue.js] Vue.js란?  (0) 2018.12.05

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바