如何分開<v-navigation-drawer>在 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文件中使用自定義組件。

我嘗試將其作為component importing並添加到 Vue 實例中，我還嘗試將其importing App.vue並將默認組件作為組件導出。

問：有人可以幫助我了解我需要在哪里注冊這個組件，或者我做錯了什么？

應用程序.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');

導航抽屜.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