Question

我试图在另一个组件中使用Vue组件（标头），但它没有正确呈现它。

我的代码：

App.vue：

<template>
  <div id="app">
    <header></header>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

Header.vue：

<template>
    <nav class="nav">
         <div class="container">
             <div class="nav-left">
                 <p class="title"></p>
             </div>
         </div>
     </nav>
</template>

<script>
export default {
  name: 'header'
}
</script>

并且，我在main.js中注册了我的组件，文件看起来像这样：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.component('header', require('./components/Header'))

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

由于我的理解非常有限，这应该就像在我的应用程序中渲染一个React <Header />，但这不是那样的。在我的<header></header>内部，对DOM进行渲染的是#app标记，这并非完全理想。

我错过了什么关键点？谢谢！

Answer 1

您无法命名名为existing HTML tag的组件。 Vue的开发版本将在控制台中警告您。

[Vue警告]：不要使用内置或保留的HTML元素作为组件 id：标题

使用其他名称重命名您的header组件。

Vue基础知识 - 在其他组件中使用组件

1 个答案: