vuetify 활용하기2 (component 활용하기)

-title, footer, menu 페이지를 따로 생성해 component 로 관리한다.

---

1. site 폴더 생성후 그 아래에 title, footer, menu.vue 페이지를 따로 생성한다.

-title.vue

<template>
  <v-toolbar-title>
    {{ title }}
  </v-toolbar-title>
</template>
<script>
export default {
  props: ['title']
}
</script>

-footer.vue

<template>
  <v-footer app color="primary" dark absolute :footer="footer">
    <v-spacer></v-spacer>
    <div>&copy; {{ new Date().getFullYear() + ' ' + footer }}</div>
  </v-footer>
</template>
<script>
export default {
  props: ['footer']
}
</script>

-menu.vue

<template>
  <div>
    <v-list-item v-for="item in items" :key="item.title" :to="item.to">
      <v-list-item-content>
        {{ item.title }}
      </v-list-item-content>
    </v-list-item>
  </div>
</template>
<script>
export default {
  props: ['footer'],
  data () {
    return {
      items: [
        {
          title: 'home',
          to: '/'
        },
        {
          title: 'about',
          to: '/about'
        },
        {
          title: 'xxx',
          to: '/xxx'
        }
      ]
    }
  }
}
</script>

 

2. App.vue 의 내용을 수정한다.

<template>
  <v-app>
    ...
        <v-list-item-content>
        <!-- title의 내용을 가져온다. -->
          <v-list-item-title class="title">
            Application
          </v-list-item-title>
    ...
      <!-- menu의 내용을 가져온다. -->
      <site-menu></site-menu>
 	...
    <!-- footer 의 내용을 가져온다. -->
    <site-footer :footer="footer"></site-footer>
  </v-app>
</template>

<script>
//각각의 페이지의 내용,위치를 import 한다.
import SiteTitle from '@/views/site/title'
import SiteFooter from '@/views/site/footer'
import SiteMenu from '@/views/site/menu'

export default {
  components: { SiteTitle, SiteFooter, SiteMenu },
  name: 'App',
  data () {
    return {
      drawer: false,
      items: [],
      title: '나의 타이틀입니다',
      footer: '푸터입니다'
    }
  },
  mounted () {
  }
}
</script>