无法将组件添加到 vue 应用程序模板 - 您是不是正确注册了组件？

Posted 2023-02-23

【中文标题】无法将组件添加到 vue 应用程序模板 - 您是不是正确注册了组件？

【英文标题】：Can't add component to vue apps template - did you register the component correctly?无法将组件添加到 vue 应用程序模板 - 您是否正确注册了组件？

【发布时间】：2019-07-02 19:41:05

【问题描述】：

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

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

<top-menu></top-menu> 在 App.vue 中。

在 main.js 中为 app 注册。 我使用的单文件组件是否正确？

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>

TopMenu.vue：

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

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

【参考方案1】：

您应该导入它并在您的 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>

【参考方案2】：

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

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

这就是你应该如何全局注册组件并且你可以在任何地方使用它。