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>

你能提出我应该尝试的任何建议吗？

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

Answer 2

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

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

请注意，我还使用了从CLI生成的“Hello World”应用程序（vue init OnsenUI/vue-pwa-webpack 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'

如何使用带有Vue单个文件组件的Onsen UI选项卡

2 个答案:

分辨率