【vue.js】コンポーネントを分割してテンプレートを分割

1画面1コンポーネントみたいな形で実装されているプロジェクトで。v-ifが増えてごちゃごちゃしてきたのでコンポーネントの分け方をメモしておく。vue.jsの基本構文だけども。。

Main.vue

<template>
  <div>
    <part-free v-if="user.isFree" v-bind:user"></part-free>
    <part-premium v-if="user.isPremium" v-bind:user"></part-premium>
  </div>
</template>

<script>
import PartFree from './PartFree.vue'
import PartPremium from './PartPremium.vue'

export default {
  data: {
    user: {
      name: 'Yamada',
      isPremium: true,
      // isFree: true
    }
  },
  components: {
    'part-free': PartFree,
    'part-premium': PartPremium,
  }
}
</script>

PartPremium.vue

<template>
  <div>Premium : {{ user.name }}</div>
</template>
<script>
export default {
  props: { user: Object }
}
</script>

PartFree.vue

<template>
  <div>Free : {{ user.name }}</div>
</template>
<script>
export default {
  props: { user: Object }
}
</script>

ずらずら書いたけど、以上です