Vue 10 - Vue 컴포넌트

Vue

by chloekim66 2022. 7. 13. 14:11

728x90

뷰 컴포넌트는 인스턴스이며, 그러므로 사용하던 옵션들을 모두 그대로 사용할 수 있고

html엘리먼트를 확장하여 재사용이 가능하다.

https://kr.vuejs.org/v2/guide/components.html

컴포넌트 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

[컴포넌트 만들기]

컴포넌트는 전역/지역 두가지 방식으로 만들 수 있다.

- 전역 등록

1. 인스턴스가 만들어지기전, 바깥에 Vue.component로 컴포넌트를 생성한다.

Vue.component(tagName, options)

2. data나 methods는 기존작성과 동일, html부분을 template를 사용해 작성한다.

(template도 jsx문법처럼 하나의 태그에 넣어줘야한다/ 줄바꿈은 백틱이용)

3. data object => 함수로 변경

인스턴스를 생성할때 data obj넣었었는데 obj를 넣으면,

주소가 참조되어 데이터가 변경될때마다 그 주소에있는 데이터가 전부 업데이트 되기때문에

함수로 바꿔준다.

data(){
        return {
        name: '린'
        }
       },

4. 사용
컴포넌트를 만들때 지어준 태그명으로 불러올 수 있다.

<body>
  <div id="app">
      {{name}}
      <button @click="changeText">click</button>
      <hr/>
      <rin-button></rin-button> //컴포넌트불러오기
  </div>
  
  //생략
  
  </body>

[컴포넌트안에서 컴포넌트 사용]

사용하고자하는 컴포넌트를 만들어, 태그처럼 불러오면 된다.

hello-world라는 컴포너트를 만들어, rin-button에서 사용하였다.

<body>
  <div id="app">
      <rin-button></rin-button>
  </div>
  <hr/>
  <div id="app-1">
    <rin-button></rin-button>
  </div> 
  <script>
    Vue.component('hello-world',{
      template:
      `<div>Hello World</div>`
    });
    Vue.component('rin-button', {
      template:`<div>
                {{name}}<br/>
                <hello-world></hello-world>
                <button @click="changeText">click</button>
                </div>`,
      data(){
        return {
        name: '린'
        }
       },
      methods:{
        changeText(){
            this.name = '린 updated';
        }
       }
    });
    const app = new Vue({
      el:'#app',
      // data:{
      //   name: '린'
      //  },
      // methods:{
      //   changeText(){
      //       this.name = '린 updated';
      //   }
      //  }
    })

    const app1 = new Vue({
      el:'#app-1',
      // data:{
      //   name: '린'
      // },
      // methods:{
      //    changeText(){
      //       this.name = '린 updated';
      //   }
      // },
    })
  </script>
</body>

- 지역 등록

전부다 전역등록을 하면 편하지만, 전역등록을 한 컴포넌트는 최종 빌드에 들어가있어,

사용하지 않아도 사용자가 내려받아야하기때문에 용량이 불필요하게 커진다. => 지역등록 사용

컴포넌트를 components 인스턴스 옵션으로 등록한다.

1. 템플릿과, 데이터, 메소드 등이 담긴 변수를 하나 생성한다.

 const RinButton = {
    template:`<div>
                {{name}}<br/>
                <hello-world></hello-world>
                <button @click="changeText">click</button>
                </div>`,
      data(){
        return {
        name: '린'
        }
       },
      methods:{
        changeText(){
            this.name = '린 updated';
        }
       }
   };

2. 인스턴스에 옵션으로 등록

기존에 있던 app 인스턴스에 component부분 추가 (태그명, 오브젝트명)

  const app = new Vue({
      el:'#app',
      components:{
        'rin-button':RinButton
      }
    })

app-1에서도 린 버튼을 사용하고싶다면, 컴포넌트 등록을 해줘야한다.

3. 린버튼안에서 hello-world가 사용되고 있기때문에, 린버튼에 컴포넌트를 등록해준다.

전체코드

<body>
  <div id="app">
      <rin-button></rin-button>
  </div>
  
  <script>
    // Vue.component('hello-world',{
    //   template:
    //   `<div>Hello World</div>`
    // });
   
   //지역등록
   const HelloWorld = {
     template:
      `<div>Hello World</div>`
   }
   const RinButton = {
    components:{
      'hello-world':HelloWorld,
    },
    template:`<div>
                {{name}}<br/>
                <button @click="changeText">click</button><br/>
                <hello-world></hello-world>
                </div>`,
      data(){
        return {
        name: '린'
        }
       },
      methods:{
        changeText(){
            this.name = '린 updated';
        }
       }
   };

    const app = new Vue({
      el:'#app',
      components:{
        'rin-button':RinButton
      },
    })
    const app1 = new Vue({
      el:'#app-1',
      // data:{
      //   name: '린'
      // },
      // methods:{
      //    changeText(){
      //       this.name = '린 updated';
      //   }
      // },
    })
  </script>
</body>

참고강의 : https://opentutorials.org/course/4091/27548

728x90

저작자표시 비영리 변경금지 (새창열림)

'Vue' 카테고리의 다른 글

Vue 13 - props (0)	2022.07.15
Vue 12 - 싱글 파일 컴포넌트(Single File Component) (0)	2022.07.13
Vue 9 - 여러개의 Vue 인스턴스 사용하기 (0)	2022.07.13
Vue 8 - v-for 리스트 렌더링 (0)	2022.07.13
Vue 7 - v-if 와 v-show (0)	2022.07.13