vue.js: [Vue warn]: Unknown custom element: <xxxx> - did you register the component correctly?

最新推荐文章于 2023-04-25 17:34:59 发布

miracleo_

最新推荐文章于 2023-04-25 17:34:59 发布

阅读量3.7w

点赞数 5

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.csdn.net/miracleoa/article/details/99831079

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我的原错误为：
vue.js:634 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
源码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>parent</title>
</head>
<body>

<div id="app">
    <introduce :title="msg"></introduce>
    <hr>
    <forComponent :items="lessons"></forComponent>
</div>


<script src="node_modules/vue/dist/vue.js"></script>
<script>

    // 局部组件
    const introduce = {
        // 注意只能有一个根标签
        template: "<h1>{{title}}</h1>",
        props: ['title']
    };

    const forComponent = {
        template: "<ul><li v-for='item in items'>{{item}}</li></ul>",
        props: ['items']
    };

    new Vue({
        el: "#app",//element  vue作用的标签 它只能作用于el下的标签
        data: {
            msg: "hello everyone !",
            lessons: ["java", "php","python"],
        },
        components:{
            introduce,
            forComponent:forComponent,
        }
    });
</script>

</body>
</html>

错误原因：
HTML 中的标签名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，使用驼峰命名法的 prop 名需要使用其等价的短横线分隔命名方法或者全部使用小写。否者就会报上述错误。

改正后的代码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>parent</title>
</head>
<body>

<div id="app">
    <introduce :title="msg"></introduce>
    <hr>
    <study :items="lessons"></study>
</div>


<script src="node_modules/vue/dist/vue.js"></script>
<script>

    // 局部组件
    const introduce = {
        // 注意只能有一个根标签
        template: "<h1>{{title}}</h1>",
        props: ['title']
    };

    const study = {
        template: "<ul><li v-for='item in items'>{{item}}</li></ul>",
        props: ['items']
    };

    new Vue({
        el: "#app",//element  vue作用的标签 它只能作用于el下的标签
        data: {
            msg: "hello everyone !",
            lessons: ["java", "php","python"],
        },
        components:{
            introduce,
            study:study,
        }
    });
</script>
</body>
</html>

miracleo_

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js: [Vue warn]: Unknown custom element: <xxxx> - did you register the component correctly?

我的原错误为：vue.js:634 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.源码：<!DOCTYPE html><html...
复制链接

扫一扫

专栏目录