如何使用带有 Vue 单文件组件的 Onsen UI 标签栏答案

【问题标题】：How to use Onsen UI tabbar with Vue single file components如何使用带有 Vue 单文件组件的 Onsen UI 标签栏
【发布时间】：2018-06-10 23:07:19
【问题描述】：

我正在使用 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>

你能推荐什么我应该尝试的吗？

【问题讨论】：

标签： vue.js vuejs2 onsen-ui onsen-ui2

【解决方案1】：

不要使用直接引用组件的标签对象，而是使用标签栏的:tabs property来设置页面：

<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> 元素。

【讨论】：

这行得通。但是……如何解决我的page在tabs中引起的Duplicate keys detected都一样？
我认为这无关。这是一个 Vue 错误，表明您正在尝试使用 v-for 重复和 :key 属性而不指定唯一值。查看the Vue.js documentation page here. 确保在 :key 属性中使用唯一键，警告应该会消失。
啊...对不起。它部分是 Vue 员工。 Onson UI # 2471。谢谢！
确保组件的根元素为v-on-page 的提醒解决了我的问题。

【解决方案2】：

以下症状我也有同样的困难：

标签根本没有出现
CLI 或控制台中没有错误

请注意，我还在使用从 CLI (vue init OnsenUI/vue-pwa-webpack hello-world) 生成的“Hello World”应用程序

分辨率

最后很简单：在文件夹的根目录中有一个名为vue-onsen-components.js 的文件，其中包含所有组件，其中一些组件已被注释掉。我不得不取消注释以下行，然后选项卡出现：

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

【讨论】：