Проблемы с регистрацией компонента NavBar в App.vue

Question

Попытка создать панель навигации, которая существует в моем приложении Vue.Исходя из реакции, поэтому я пытаюсь импортировать мой компонент навигации в main.ts и использовать его над выходом маршрутизатора в App.vue.Приложение было сгенерировано с использованием vue-cli с машинописью и маршрутизатором.

Я попытался написать компонент навигации с Vue.extend, @Component, export default {*/ options */}.

Я попытался добавитьтег сценария в App.vue, внутри которого я бы зарегистрировал компонент навигации.

Я импортировал и зарегистрировал компонент Navigation в 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>

Ожидается: панель навигации в верхней части приложения на всех страницах (на данный момент у меня только два маршрута)

Факт: неизвестный пользовательский элемент ''.Вы правильно его зарегистрировали?Для рекурсивных компонентов обязательно включите опцию 'name'.

Множество альтернатив просто привели к сообщению об ошибке «Не удалось смонтировать компонент: шаблон или функция рендеринга не определена».Есть предложения?Спасибо за любую помощь!

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

1. Как сказал tony19, nav-component в App.vue не зарегистрирован.
2. Компоненты, которые вы зарегистрировали, локально находятся в `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 здесь.

1005 *