Vue単一ファイルコンポーネントでOnsen UI tabbarを使用する方法

Question

私はVue Onsen UIを使用しており、各タブのVue単一ファイルコンポーネントをレンダリングしようとしています。

documentation hereでは、1ページにテンプレートを使用しています。それはあまり再利用できません。カスタムコンポーネントをインポートしてレンダリングできるようにしたい。

私がやろうとしていることは、うまくいかないようです。

<template lang="html"> 
    <v-ons-page> 
    <!-- top tab bar --> 
    <v-ons-tabbar position="top" :index="0"> 
     <v-ons-tab label="Browse" page="TaskList"> 
     </v-ons-tab> 
     <v-ons-tab label="Second"> 
     </v-ons-tab> 
    </v-ons-tabbar> 
    </v-ons-page> 
</template> 


<script> 
import TaskList from './TaskList'; 

export default { 
    template: '#main', 
    components: { 
    'task-list': TaskList, 
    }, 
}; 
</script> 

<style lang="scss"> 
</style> 

私は何か試してみるべきことを提案できますか？あなたはpageプロパティで参照するコンポーネントの確認ルート要素を作成し、また、

<template lang="html"> 
    <v-ons-page> 
    <v-ons-tabbar position="top" :index="0" :tabs="tabs"> 
    </v-ons-tabbar> 
    </v-ons-page> 
</template> 

<script> 
import TaskList from './TaskList'; 
import SecondPage from './SecondPage'; 

export default { 
    template: '#main', 
    data: function() { 
     return { 
      tabs: [ 
       {label: 'Browse', page: TaskList}, 
       {label: 'Second', page: SecondPage} 
      ] 
     } 
    } 
}; 
</script> 

：代わりに直接コンポーネントを参照タブオブジェクトを使用しての

Answer 1

は、ページを設定するタブバーの:tabs propertyを使用します<v-ons-page>要素です。