【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>
ずらずら書いたけど、以上です