我正在尝试使用嵌套的单个文件组件,但它不起作用。
这是我的 main.js
文件:
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"
Vue.use(BootstrapVue);
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
这是我的 App.vue
文件:
<template>
<div>
<menu/>
<span>This text works</span>
</div>
</template>
<script>
import menu from "./components/menu.vue";
export default {
components: {
"menu": menu
}
}
</script>
这是我的 menu.vue
文件:
<template>
<p>nothing show</p>
</template>
<script>
export default {
}
</script>
呈现了我的 App.vue
模板中的内容,但没有呈现我的菜单模板的内容。
Ps: 没有抛出错误
最佳答案
有一个原生的 HTML5 <menu>
元素。您必须将其重命名为其他名称。您确实应该在名称中使用连字符来命名所有组件,以防止发生此类事情。在此处查看第一条通知:https://v2.vuejs.org/v2/guide/components.html#Using-Components
关于javascript - 具有单个文件组件的 Vuejs 嵌套组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49098301/