Vuejs 单文件组件中的嵌套组件

Question

我想使用嵌套的单文件组件，但不起作用。 这是我的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模板中的内容被渲染，但菜单模板中的内容未被渲染。

提示：没有错误抛出。

- JohnyBro

Answer 1

有一个原生的HTML5元素<menu>。你需要将其重命名为其他名称。你真的应该在组件名称中使用连字符，以防止发生这种情况。请查看此处的第一条公告：https://v2.vuejs.org/v2/guide/components.html#Using-Components

- Bill Criswell