vue组件命名中的坑

最新推荐文章于 2022-12-16 09:56:21 发布

梁萌

最新推荐文章于 2022-12-16 09:56:21 发布

阅读量283

点赞数

分类专栏： vue 文章标签： vue 组件命名

本文链接：https://blog.csdn.net/liangmengbk/article/details/85013425

版权

vue 专栏收录该内容

45 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/vue.js"></script>
</head>

<body>

    <div id="app">
       <comA></comA>
       <com-b></com-b>
       <comc></comc>
    </div>

    <script>
        var componentA = {
            template: `<div style="color:red">我是A组件</div>`
        }

        var componentB = {
            template: `<div style="color:yellow">我是B组件</div>`
        }

        var componentC = {
            template: `<div style="color:pink">我是C组件</div>`
        }

        var app = new Vue({
            el: '#app',
            components: {
                "comA": componentA,
                "com-b": componentB,
                "comc": componentC
            }
        })

    </script>
</body>

</html>

如果 components选项中组件的名字为 'comA' ，那么引用组件时就要用 'com-a' 否则是无法解析的。