Vue组件名的大小写

最新推荐文章于 2023-08-28 23:18:14 发布

每一天，每一步

最新推荐文章于 2023-08-28 23:18:14 发布

阅读量720

点赞数

分类专栏： Vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/u010234868/article/details/120070765

版权

Vue 专栏收录该内容

122 篇文章 2 订阅

订阅专栏

定义组件名的方式有两种：

1. 使用 kebab-case：

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

2. 使用 PascalCase：

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var AppName = {
            data() {
                return {
                    msg: 'hello Vue'
                }
            },
            template: `<h2>{{msg}}</h2>`
        };
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {

                }
            },
            components: {
                AppName
            },
            methods: {

            },
            template: `<app-name></app-name>`  // 可以使用AppName也可以使用app-name
        });
    </script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件名的大小写

定义组件名的方式有两种：1. 使用 kebab-case：Vue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如<my-component-name>。2. 使用 PascalCase：Vue.component('MyComponentName', { /* ... */ })当使用 Pasca.
复制链接

扫一扫

专栏目录