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

Posted 2023-02-16

【中文标题】如何在 vuetify vue.js 应用程序中分隔 <v-navigation-drawer>？

【英文标题】：How to separate <v-navigation-drawer> in vuetify vue.js app?

【发布时间】：2019-02-26 07:29:25

【问题描述】：

我正在尝试从我的应用程序的<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，我还尝试在 App.vue 中使用 importing 它并将默认组件作为组件导出。

问：谁能帮我了解我需要在哪里注册这个组件，或者我做错了什么？

App.vue

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

      </v-toolbar>
      <v-content>
        <v-container class="grey lighten-5" fluid="fluid" fill->
          <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>

【问题讨论】：

@Sphinx 它按预期记录组件，因此不是未定义的。我不确定这是vue.js 的问题，还是vuetify 的一些怪癖/要求。

【参考方案1】：

建议你像这样声明你的组件：

components:  'app-navigation-drawer': NavigationDrawer 

应该可以。

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

<NavigationDrawer></NavigationDrawer>

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

【讨论】：

哦，对不起。您正在 main.js 文件中进行声明。您应该在 App.vue 文件中执行此操作。添加一个脚本部分并在那里声明组件。