Javascript Can'；t将组件添加到vue应用程序模板-您是否正确注册了该组件？

我在应用程序中添加了一个主vue应用程序。我想在应用程序中添加一个组件

正在尝试将TopMenu.vue添加到App.vue：

App.vue中的

已在main.js中为应用程序注册。 我使用的单文件组件正确吗

main.js

import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'

Vue({
  el: '#app',
  render: h => h(App),
  components: {
    'top-menu': TopMenu
  }
})

App.vue：

<template>
  <div class="wrapper">
    <top-menu></top-menu>
    <div class="container drop-shadow">
      <h1>{{ message }}</h1>
      <p1>{{ about }}</p1>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello kosken!",
      about: "Using Parcel In A Vue.js App"
    };
  }
};
</script>

{{message}}
{{about}}
导出默认值{
名称：“应用程序”，
数据（）{
返回{
信息：“你好，科斯肯！”，
关于：“在Vue.js应用程序中使用包裹”
};
}
};

TopMenu.vue：

<template>
    <div class="user-menu drop-shadow"></div>
</template> 

<script>
    export default {
        name: 'top-menu',
        data: function () {
            return "somedata";
        }
    }
</script>

导出默认值{
名称：“顶部菜单”，
数据：函数（）{
返回“somedata”；
}
}

您应该导入它并在您的

App.vue中使用它

：

<template>
  <div class="wrapper">
    <top-menu></top-menu>
    <div class="container drop-shadow">
      <h1>{{ message }}</h1>
      <p1>{{ about }}</p1>
    </div>
  </div>
</template>

<script>
import TopMenu from './TopMenu'
export default {
  name: "App",
  data() {
    return {
      message: "Hello kosken!",
      about: "Using Parcel In A Vue.js App"
    };
  },  
  components: {
    'top-menu': TopMenu
  }
};
</script>

{{message}}
{{about}}
从“./TopMenu”导入TopMenu
导出默认值{
名称：“应用程序”，
数据（）{
返回{
信息：“你好，科斯肯！”，
关于：“在Vue.js应用程序中使用包裹”
};
},  
组成部分：{
“顶部菜单”：顶部菜单
}
};

这就是您应该全局注册组件的方式，您可以在任何地方使用它

import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'

Vue.component('top-menu', TopMenu)