Vue 基础——在其他组件中使用组件 [英] Vue basics -- use component in other component
问题描述
我正在尝试在另一个组件内部使用 Vue 组件(标题)，但它没有正确呈现.
我的代码:
App.vue:
<div id="应用程序"><标题></标题></模板><脚本>导出默认{名称:'应用'}
Header.vue:
<nav class="nav"><div class="容器"><div class="nav-left"><p class="title"></p></nav></模板><脚本>导出默认{名称:'标题'}
而且，我在 main.js 中注册了我的组件，文件如下所示:
从'vue'导入Vue从'./App'导入应用程序从'./router'导入路由器Vue.component('header', require('./components/Header'))Vue.config.productionTip = false新的 Vue({el: '#app',路由器，模板:'<App/>',组件:{应用}})以我非常有限的理解，这应该就像在我的应用程序中渲染一个 React <Header/> ，但这不是那样工作的.渲染到 DOM 的是我的 #app 中的一个普通的
我遗漏了什么关键点?谢谢！
您不能使用 现有 HTML 标签.Vue 的开发版会在控制台中警告你这一点.
<块引用>[Vue 警告]:不要使用内置或保留的 HTML 元素作为组件id:标题
使用其他名称重命名您的 header 组件.
I'm trying to use a Vue component (a header) inside of another component, but it's not rendering it correctly.
My code:
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>
And, I register my component in main.js, with the file looking like this:
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 }
})
With my very limited understanding this should be like rendering a React <Header /> in my App, but this is not working that way. What's getting rendered to the DOM is a plain <header></header> tag inside of my #app, which isn't exactly ideal.
What key point am I missing? Thanks!
You cannot name a component with the name of an existing HTML tag. The development version of Vue will warn you of this in the console.
[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
Rename your header component with some other name.
这篇关于Vue 基础——在其他组件中使用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
