javascript - 如何在 vuetify vue.js 应用程序中分隔 ？

Question

我正在尝试从我的应用程序的 <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并将其添加为 component在 Vue 实例中，我也试过 importing它在 App.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>

ma​​in.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>

Answer 1

建议您这样声明您的组件:

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

这应该有效。

如果你想直接做，使用声明的名称:

<NavigationDrawer></NavigationDrawer>

引用:https://v2.vuejs.org/v2/guide/components-registration.html