[VueJS] Vue.component templates 정의하는 방법

vue component 를 사용할때 tempalate를 정의하는 여러 방법이 존재하는데

그중에서 나는 두가지 방법을 써본것같다 아직 VueJS를 많이 써본게 아니라서 그렇다.

내가 직접 써본것만 정리해 두려 한다.

 

▷ Strings

이 방법에 내가 정리한 방법중에 동적으로 추가하는 방법에 대해 설명할 때 사용한 방식이다.

<div id='it_list'>
   <it-component>
   </it-component>
</div>

Vue.component('it-component',{
    props : [],
    template: '<ul><li>mine</li></ul>'
});

new Vue({
    el: '#it_list',
    data: {
    },
    methods: {
    }
});

그저 JavaScript 에서 template 를 string 으로 입력하는건데 간단한거면 상관없지만 코드가 많아질수록 확연하게 가독성이 떨어지는 아주 심각한 단점이 존재한다. 유일한 장점은 많은 브라우저에서 지원한다는것인데 잘 사용하지 않는 방법이다.

 

▷ Inline Templates

아직 VueJS에 대해서 잘 모르기 때문에 Strings 방법을 사용하다가 이 방식을 처음 접해봤는데 진짜 혁신이였다.... 아마 다른 방법도 많겠지만, 컴포넌트에 inline-template 속성을 추가하면 내부 콘텐츠를 템플릿으로 인식한다.

 

HTML 안에서 작성하기 때문에 가독성이 매우 뛰어나다. (vue 3.x 버전부터는 지원을 안한다는 소리가 있더라...)

<div id='it_list'>
     <mine-it inline-template>
        <ul>
          <li>mine</li>
          <li>it</li>
          <li>record</li>
          <button v-on:click="code">VueJS</button>
        </ul>
    </mine-it>
</div>

Vue.component('mine-it', {
  data() { 
    return { 
      test : 'hi'
    } 
  },
  methods: { 
    code : function(){ 
      alert(this.test); 
    } 
  } 
});
  
  new Vue({
      el: '#it_list',
      data: {
      },
      methods: {
      }
  });

 

---

그 외에도 역시 많은 방법들이 존재하는데 각각의 방식에 대해 장단점을 잘 정리해둔 곳이 존재한다.

 

 

참고 : Vue에서 컴포넌트 템플릿을 정의하는 7가지 방법

GitHub - FEDevelopers/tech.description: 기술 문서 정리하는 저장소