如何將Onsen UI標簽欄與Vue單個文件組件一起使用

Question

我正在使用Vue Onsen UI並嘗試為每個選項卡呈現Vue單個文件組件。

在此處的文檔中 ，他們在單個頁面中使用模板。 這不是很可重用。 我希望能夠導入自定義組件並進行渲染。

這是我正在嘗試做的似乎無效的事情。

<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>

你能建議我嘗試什么嗎？

Answer 1

不要使用直接引用組件的選項卡對象，而使用選項卡欄的：tabs屬性來設置頁面：

<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>

另外，請確保您在page屬性中引用的組件的根元素是<v-ons-page>元素。

Answer 2

我在以下症狀上遇到了同樣的困難：

• 標簽完全沒有出現
• CLI或控制台中沒有錯誤

請注意，我還使用了從CLI生成的“ Hello World”應用程序（ vue init OnsenUI/vue-pwa-webpack hello-world ）

解析度

最后非常簡單：文件夾的根目錄中有一個名為vue-onsen-components.js的文件，其中包含所有組件，並且其中的一些vue-onsen-components.js已被注釋掉。 我必須取消注釋以下幾行，然后出現選項卡：

export { default as VOnsTab } from 'vue-onsenui/esm/components/VOnsTab' export { default as VOnsTabbar } from 'vue-onsenui/esm/components/VOnsTabbar'