2

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

你能建议我应该尝试什么吗？

4

2 回答 2

2

不要使用直接引用组件的选项卡对象，而是使用选项卡栏的: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>元素。

于 2018-02-22T14:36:24.463 回答
0

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

  • 选项卡根本没有出现
  • 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'

于 2018-05-24T06:28:01.367 回答