我正在尝试从我的应用程序的 <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>
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>
最佳答案
建议您像这样声明您的组件:
components: { 'app-navigation-drawer': NavigationDrawer }
这应该有效。
如果您想直接执行此操作,请使用声明的名称:
<NavigationDrawer></NavigationDrawer>
引用:https://v2.vuejs.org/v2/guide/components-registration.html
关于javascript - 如何在 vuetify vue.js 应用程序中分离 <v-navigation-drawer> ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52451325/