在应用程序中注册导航栏组件时出现问题。vue

Question

正在尝试创建存在于我的Vue应用程序中的导航栏。来自react，所以我正在尝试将导航组件导入main。并在应用程序中的路由器插座上方使用。vue。应用程序是使用带有typescript和Router的vue cli生成的。

我尝试用Vue.extend、@Component、导出默认{*/选项*/}编写导航组件。

我尝试在应用程序中添加脚本标记。vue，我将在其中注册导航组件。

我已经在main中导入并注册了导航组件。ts。

Navigation.ts：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { store } from '@/store';

@Component({
    name: 'nav-component',
})
export default class Navigation extends Vue {}

航行vue：

<template>
    <nav class="nav-header" >
        <div>
            <button class="switch-map">MAP</button>
        </div>
    </nav>
</template>

<script src='./Navigation.component.ts' ></script>
<style lang="scss" scoped src='./Navigation.scss' ></style>

主要的ts:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// various imports
import NavigationComponent from 
'@/components/Navigation/Navigation.component';

Vue.config.productionTip = false;

new Vue({
  components: {
    'nav-component': NavigationComponent
  },
  data: {

  },
  store: store,
  router,
  render: h => h(App)
 }).$mount("#app");

应用程序。vue：

<template>
  <div id="app">
    <nav-component></nav-component>
    <router-view/>
  </div>
</template>

预期：在所有页面的应用程序顶部的导航栏（我目前只有两条路线）

实际：未知的自定义元素”。您注册正确了吗？对于递归组件，请务必包含“名称”选项。

许多替代方案刚刚导致“挂载组件失败：未定义模板或渲染函数”错误消息。有什么建议吗？感谢您的任何帮助！

Answer 1

看来，你在导入Navigation.component

import NavigationComponent from 
'@/components/Navigation/Navigation.component';

但是你需要导入导航。我在这里。

import NavigationComponent from 
'@/components/Navigation/Navigation.vue';

Answer 2

1. 正如tony19所说，应用程序中的导航组件。vue未注册
2. 您注册的组件都是本地的。ts'：

// The components created by `new Vue` are local.
// *mainInstance including `nav-component`,bus App isn't including it.
const mainInstance = new Vue({
  components: {
    'nav-component': NavigationComponent
  }
  // Just a rendering component,App cannot inherit the current injected components.
  render: h => h(App)
});

如果要创建全局零部件，可以执行以下操作：

Vue.component('nav-component', NavigationComponent);

Answer 3

导航组件用于应用程序。vue，但该文件没有组件声明。看起来您已经在main中声明了它。ts，但应该将其移动到应用程序中。vue，实际使用组件的位置。

^pp.vue：

<script>
import NavigationComponent from '@/components/Navigation/Navigation.component';

export default {
  name: 'app',
  components: {
    'nav-component': NavigationComponent
  }
}
</script>

另请注意