Vue.js_컴포넌트

보현·2020년 7월 11일
0

VueJs

목록 보기
7/14

전역(global) component

<div id="app2">
  <my-component></my-component>
</div>

<script>
//컴포넌트 등록
  Vue.component('my-component',{
    template:`
      <div>
        {{component}}<br>
        <button @click="instanceToggle">component button</button>
        <sec-component></sec-component>
      </div>
    `,
    data(){
    // 컴포넌트는 레퍼런스주소로 넘겨주기때문에 data()함수로 오브젝트를 리턴해줌
      return{
        component : 'component'
      } 
    },
    methods:{
      instanceToggle(){
        this.component = 'clicked'
      }
    }
  })
  Vue.component('sec-component',{
    template:`
      <div>
        second component
      </div>
    `
  })
  const app2 = new Vue({
    el: 'app2',
    data: {
      instance: 'app2'
    },
    methods:{}
      instanceToggle(){
        app2.instance = 'clicked!'
      }
  })
</script>

전역컴포넌트의 예이다.
두개의 컴포넌트가 있다.
body에서 태그를 사용하고, 해당태그안의 내용은 component의 template에서 정의한다.
컴포넌트는 인스턴스보다 위에서 정의해줘야한다. 동작안함. 개삽질해따

가장바깥에 div로 rapping해주어야하고, 백틱(``) 을 사용한다.
재사용이 가능하다.
어떤 Vue 인스턴스안에서도 사용가능하다.

지역(local) component

<div id="app3">
  {{instance}}<br>
  <local-component></local-component>
</div>

<script>
//인스턴스옵션으로 지역컴포넌트등록
  const localComponent = {
    template:`
      <div>
      {{component}}<br>
      <button @click="instanceToggle">local component button</button>
      </div>
    `,
    data(){
      return{
        component : 'local component'
      } 
    },
    methods:{
      instanceToggle(){
        this.component = 'clicked'
      }
    }
  }
  //사용할 컴포넌트들만 components옵션을 통해 사용할수있음
  //app3 인스턴스에서 컴포넌트를 등록했기때문에 여기서만 사용가능
  const app3 = new Vue({
    el: '#app3',
      components:{
        'local-component' : localComponent
      }
  })
</script>

지역컴포넌트는 인스턴스형태로 등록해주며 사용할 인스턴스 안에 정의를 해줘야 사용이 가능하다.

전역컴포넌트는 사용하지 않더라도 최종빌드에 포함되기때문에 불필요하게 자바스크립트의 양이 늘어나게된다.

profile
실천하는 보현이가 되자, 제발

0개의 댓글