如何在vuetify vue.js应用程序中分隔<v-navigation-drawer>?

时间:2018-09-21 21:38:18

标签: javascript vue.js vuejs2 vuetify.js

我正在尝试从应用的<v-navigation-drawer>中创建一个组件,但看到一个错误:

  

Unknown custom element: <app-navigation-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

作为vue.js的新手,我已经确定了要在特定route中使用的组件,但是无法确定要在主App.vue文件中使用自定义组件。

我尝试过importing并将其添加为Vue实例中的component,我也尝试过importingApp.vue中将其导出,并使用作为一个组件。

:有人可以帮我了解我需要在哪里注册该组件,或者我做错了什么?

App.vue

<template>
  <div id="app">
    <v-app>
      <app-navigation-drawer/>

      </v-toolbar>
      <v-content>
        <v-container class="grey lighten-5" fluid="fluid" fill-height="fill-height">
          <router-view></router-view>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Vuetify from 'vuetify';

import NavigationDrawer from './views/NavigationDrawer.vue';
Vue.use(Vuetify);
new Vue({
  router,
  store,
  components: { NavigationDrawer },
  render: h => h(App)
}).$mount('#app');

NavigationDrawer.vue

<template>
    <v-navigation-drawer app stateless value="true">Drawer</v-navigation-drawer>
</template>
<script>
export default {
    name: 'app-navigation-drawer'
}
</script>

1 个答案:

答案 0 :(得分:2)

建议您这样声明组件:

components: { 'app-navigation-drawer': NavigationDrawer }

应该可以。

如果您想直接进行操作,请使用声明的名称:

<NavigationDrawer></NavigationDrawer>

参考:https://vuejs.org/v2/guide/components-registration.html