Question

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

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

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

文件结构为：

VIEWS FILE导入要嵌套在其中的组件： 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 / router / 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（因此不再用其名称引用）....那么为什么要定义名称？

如果有任何有关这方面的文档令人惊叹，虽然这似乎是一个愚蠢的问题（可能是），但它却让我分心....

感谢您的帮助-

Wally

Answer 1

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

请仔细阅读以下内容以获得更好的主意：documentation

Answer 2

以此更改您的代码

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

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

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

2 个答案: