[Vue.js] export default에 대해서

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 

 

 Vue.js를 다룰 때에, export default에 대해서 잘 몰랐기에 조사해서 정리해봤다.

 

 

단일 파일 컴포넌트

---

 단일 파일 컴포넌트란 컴포넌트를 구성하는 template, style, script를 하나의 Vue 파일로 정리해서 관리하는 것을 말한다. 기능마다 "HTML", "CSS"를 분리하는 것이 아닌, 부품 단위로 관리하며, 이렇게 분리하는 것으로 UI를 작성할 수 있다.

 단일 파일 컴포넌트의 생각법으로 만들어진 것이 VueCLI이다.

 

 

다른 컴포넌트에서 이용되도록 하기 위해서는

---

 그렇다면, 단일 파일 컴포넌트의 생각법으로 다른 컴포넌트에서도 이용되도록 하기 위해서는 어떻게 하면 좋을까? 그것은 export default로 멤버에 포함시키는 것으로 외부에서도 참고할 수 있도록 하면 된다.

 단일 파일 컴포넌트에서는 외부에서 참조되는 것을 전제로한 구조가 되므로, 기본적으로는 script의 부분은 export default로 감싸는 것을 전제가 된다.

<script>
export default {
    name: "Header",
    data() {
        return{
            msg2: "안녕하세요"
        }
    } 
}
</script>

 쓰는 쪽(아마, 부모 컴포넌트)에서는 import한 후에, 사용할 컴포넌트를 다시 export default로 감사고 template의 안에 사용하는 모듈이 된다.

<script>
import Header from '@/components/Header.vue'

export default {
  name: 'home',
  components: {
    Header
  }
}

</script>

 script에 export default로 감싸고 있으므로, 템플릿에서는 Header을 사용할 수 있게 된다.

<template>
  <div class="home">
    <Header/>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="안녕하세요"/>
    <h1>This is an about page <fa icon="user" /></h1>
  </div>
</template>

 단일 파일 컴포넌트에서는 어떠한 관련된 vue 파일은 반드시 export default가 필요하다.

---

참고자료

https://qiita.com/notch0314/items/e9f2b704a340824393b8