Vue 단일 파일 구성 요소와 함께 Onsen UI tabbar를 사용하는 방법

Question

Vue Onsen UI를 사용하고 각 탭에 대해 Vue 단일 파일 구성 요소를 렌더링하려고합니다.

documentation here에서는 한 페이지에 템플릿을 사용합니다. 어떤 재사용이 가능하지 않습니다. 사용자 지정 구성 요소를 가져 와서 렌더링 할 수있게하려고합니다.

다음은 내가하려고하는 것으로 작동하지 않는 것입니다.

<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

는 페이지를 설정하는 TabBar의의 :tabs property를 사용 <v-ons-page> 요소입니다.