将组件导入视图不显示/VUE js

Question

TLDR：我已经将一个组件嵌套到一个视图文件夹中并且它不会显示，我相信我已经正确导入它并且认为我错过了一些东西/这里的任何帮助都会很棒

我将组件导入到视图文件中，然后将通过 vue 路由器显示-问题是组件或视图不显示-

奇怪的是，如果我要求路由器将组件显示为独立的，则此代码有效，但当我将组件嵌套到视图文件中时则无效：

文件结构为：

导入要嵌套在其中的组件的视图文件： src/views/Contact.vue <<<< 我想我在这里有问题，但我似乎无法弄清楚

<template>
     <div class="contact_container">
         <Contact/>
     </div>
</template>

<script>
import Contact from '@/components/Contact.vue'
export default {
    name: 'Contact',
    components: {
        Contact
    }
}
</script>

组件文件 src/components/Contact.vue

<template>
    <div>
        <h1>Welcome to the contact page</h1>
    </div>
</template>
<script>
export default {
    name: 'Contact',
    data(){
        return{
            
        }
    }
}
</script>

查看路由器文件：

src/路由器/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
]

const router = new VueRouter({
  routes
})

export default router

最后是 App.veu

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contact">Contact</router-link>
    </div>
    <router-view/>
  </div>
</template>

/// 更新 ///

在下面的代码中 - name属性有什么作用？

（下面的代码是定义一个组件）

<template>
    <div>
        <h1>Welcome to the contact page</h1>
    </div>
</template>
<script>
export default {
    name: 'Contact-Component',  <<<< what does this do? 
    data(){
        return{

        }
    }
}
</script>

我在这里有点迷失的原因是因为当我们使用这个组件时，我们使用下面的代码将它导入到另一个文件中：

import Contact from '../views/Contact.vue'

在那个过程中，我们将组件定义为 Contact（因此它的名称不再引用它）......那么我们为什么要定义名称呢？

如果有任何关于这方面的文档会很棒，虽然这似乎是一个愚蠢的问题（而且可能是），但它让我的好奇心分散了注意力......

谢谢你的帮助 -

沃利

Answer 1

用这个改变你的代码

<template>
     <div class="contact_container">
         <Contact/>
     </div>
</template>

<script>
import Contact from './components/Contact.vue'
export default {
    name: 'Contact',
    components: {
        "Contact":contact
    }
}
</script>

Answer 2

该名称用于允许组件在其模板中递归调用自身。 它在调试时也很有帮助，因为它允许更有用的错误消息。

阅读此内容以获得更好的主意： https://v2.vuejs.org/v2/api/#name

Answer 3

你必须让应用知道它是一个 Vue 组件：

<script lang="js">
import Vue from 'vue';

export default Vue.extend({
  name: 'Contact',
  ...
});