Question

我将所有简单的全局组件收集到./components/basic文件夹中，并且希望在全局范围内自动注册。

以下是代码：

import Vue from "vue";
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';


const requireComponent = require.context('./components/basic/', true, /[A-Z]\w+\.(vue|js)$/); 

requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName)
    const componentName = upperFirst(camelCase(fileName.split('/').pop().replace(/\.\w+$/, '')));
    Vue.component(componentName, componentConfig.default || componentConfig);
  });

new Vue({
    el: "#app"
});

index.html片段：

<body>
    <div id="app">  
        <MyBasic></MyBasic>
    </div>
    <script src="./dist/main.js"></script>
</body>

最后是MyBasic.vue组件：

<template>
    <h1>My basic component</h1>
</template>

<script>
    export default {
        name: 'MyBasic',
        data(){   
            return{
                header: "Hi!"
            }
        }
    }
</script>

<style></style>

一切似乎都正确，但实际上它向控制台抛出警告，并且我的组件无法正常工作：

[Vue警告]：未知的自定义元素：-您是否注册了组件正确吗？对于递归组件，请确保提供 “名称”选项。（位于Root中）

注册脚本出了什么问题？

Answer 1

问题是您直接在DOM中使用PascalCase：

https://vuejs.org/v2/guide/components-registration.html#Name-Casing

但是请注意，只有kebab-case名称直接在DOM中有效（即非字符串模板）。

浏览器会将<MyBasic>转换为<mybasic>，如错误消息所示。您需要在<my-basic>中使用index.html。

另请参阅https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended

文件夹

1 个答案: