具有单文件组件的 Vuejs 嵌套组件

Posted 2023-02-22

【中文标题】具有单文件组件的 Vuejs 嵌套组件

【英文标题】：Vuejs nested components with single file components

【发布时间】：2018-08-12 09:22:23

【问题描述】：

我正在尝试使用嵌套的单个文件组件，但它不起作用。 这是我的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：没有错误抛出

【参考方案1】：

有一个原生 html5 <menu> 元素。您必须将其重命名为其他名称。您确实应该在名称中使用连字符来命名所有组件，以防止发生此类事情。在此处查看第一个通知：https://vuejs.org/v2/guide/components.html#Using-Components