Question

尝试创建一个在我的Vue应用程序中存在的导航栏。来自react，所以我想将我的Navigation Component导入到main.ts中，并在App.vue中路由器出口的上方使用它。应用程序是使用带有打字稿和路由器的vue-cli生成的。

我尝试使用Vue.extend，@Component，export default {*/ options */}来编写导航组件。

我尝试在App.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 {}

Navigation.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>

main.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");

App.vue：

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

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

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

许多替代方法都导致了“无法安装组件：模板或渲染函数未定义”错误消息。有什么建议吗？感谢您的帮助！

Answer 1

nav-component用于App.vue，但是该文件没有components声明。看起来您已经在main.ts中声明了它，但是应该将其移到App.vue中，该组件实际上是在其中使用的。

^App.vue：

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

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

还要注意，<script>中的Navigation.vue标签缺少lang="ts"。

Answer 2

正如tony19所说，nav-component中的App.vue未注册。
您注册的组件位于“ main.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

似乎您正在导入Navigation.component

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

但是您需要在此处导入Navigation.vue。

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

Answer 4

以这种方式在event_time中导入导航组件：

App.vue

无需在import NavigationComponent from '@/components/Navigation/Navigation.vue';中导入，如果您在main.ts中导入并以这种方式使用它，导航组件将在整个应用程序中可用。

App.vue

记得在<template> <div id="app"> <navigation-component></navigation-component> <router-view/> </div> </template>的script标签中的组件中这样注册：

App.vue

无法在App.vue中注册NavBar组件

4 个答案: