전역컴포넌트, 지역 컴포넌트 선언 및 정리

방법 1 ) 지역컴포넌트 선언

먼저 아래는 new Vue(생성자)를 이용한 Vue 의 기본단위인 인스턴스라고 한다.

<div id="component">
</div>

new Vue({
  el: '#component',
  mixins: [mixin, linkUrlMixin, deviceMixin, webViewBridgeMixin], // 공통메서드 가져와 씀
  created() {
    // 인스턴스가 만들어질 때 (데이터 초기화 목적)
  }, 
  mounted() {
    // 인스턴스가 dom에 붙을때 (dom 조작 목적)
  },
  data : function() {
    return {
      // 데이터 정의
    }
  },
  methods : {
    // 만들어두는 함수, 동작때 쓰임
  },
  computed : {
    // 계산식 , 변수화가 됨. 
  },
  props : [], // 다른 컴포넌트에서 전달 받은 값
  watch : {
   // 변수값 변경되었을 때 호출되는 함수
  },
  components : {
   // 해당 인스턴스내에서 쓰일 컴포넌트 
  }
})

 

쓰다보니 methods 와 computed 는 비슷한데 뭐가 다른지 찾아보았다.

computed vs methods

computed는 자신이 참고하고 있는 값의 변화에 따라 해당 메소드가 매번 실행하는 반면,

methods는 경우 자신이 참고하는 값과 더불어 다른 값들의 변화에 따라 똑같이 재실행 되었다.

이렇듯, 원하지 않는 재실행을 지양하고 퍼포먼스를 올림에 있어서는 계산식을 쓸 때에 computed를 주로 써야함을 뜻한다.

참고 ) https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-%EA%B3%84%EC%82%B0%EB%90%9C-%EC%86%8D%EC%84%B1-vuejs-instance-computed-93cb6ad7dca9

 

proops

props 의 쓰임새가 헷갈릴때가 있는데 쉽게 말해 전달자라고 이해하면 될듯 하다. 아래 예시

 // 부모
<ex-component ex-name="jeon"></ex-component>

// 자식
<div id="component">
 <h1>My name is {{name}}</h1>
</div>

new Vue({
 el : '#component',
 prop : [exName], // 다른 컴포넌트에서 받은 값을
 data : {
  name : this.exName // 해당 컴포넌트의 data name에 할당. 
 }
})

props 로 다른 컴포넌트에서 받은 값을 해당 컴포넌트 안에서 쓸 수 있다.

 

지역컴포넌트 쓰임

위에서 생성자를 통해 만든 인스턴스 내에 컴포넌트를 쓰고 싶을때,

components 속성으로 해당 인스턴스에 지역 컴포넌트를 쓸 수 있게 붙여준다.

그렇기 때문에 만약 a라는 지역 컴포넌트를 b라는 인스턴스에 넣기 위해서는 b에 컴포넌트를 등록해줘야한다.
아래 예시

var aComponent = { ... };

new Vue({
 el : '#bComponent',
 components : {
  'a-component' : aComponent
 }
})

귀찮다고해서 모두 전역 컴포넌트화 해서 쓰다가는 최초 빌드시에 전역 컴포넌트를 빌드하기 때문에 무거워진다.

 

 

방법 2) 전역컴포넌트 선언

Vue.component('component-name', { // 사용할 컴포넌트 이름
 template : '#footer', 
 .....
})

위 코드를 통해 전역 컴포넌트가 생성된다.

이는 어디에서든 해당 컴포넌트를 components 속성없이 불러올 수 있다.