Vue.js_싱글페이지 컴포넌트

컴포넌트의 내용이 많아지면 따로 페이지를 분리하고, 사용하려는 페이지에서는 vue파일을 import 해주고 태그로 사용한다.
vue의 default프로젝트의 Home에서 컴포넌트를 사용해보겠다.

1. 컴포넌트파일 만들기 ('@/components/bobo.vue')

<template>
    <div>
        {{name}}<br>
        <button @click="update()">update name</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name : 'BoHyeon'
        }
    },
    methods: {
        update(){
            this.name = 'updated name !'
        }
    },
}
</script>

<style scoped>

</style>

컴포넌트페이지를 생성할때 항상 template태그로 래핑해주고 그안에 클래스 속성값을 가지는 div태그로 래핑해줘야한다.
또한 스타일태그에서 scoped속성을 사용하면 현재 페이지에서만 스타일값이 먹는다.

2. 컴포넌트 사용하기 ('@/views/Home.vue')

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    //컴포넌트사용
    <bobo/>
  </div>
</template>

<script>
//컴포넌트 import
import bobo from '@/components/bobo.vue'
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  //컴포넌트 등록
  components: {
    HelloWorld,bobo
  }
}
</script>

내가 만든 컴포넌트인 bobo.vue를 Home.vue에서 사용한다.
해당페이지에서 script태그 바로 아래에 import를 해준다. from뒤에는 파일의 경로를 써준다.
그리고 export default에서 컴포넌트 등록을 해준다.

이제 사용하고싶은 위치에 태그를 사용해주면 내용이 채워진다.