Vue全局注册中的kebab-case和PascalCase

最新推荐文章于 2024-12-27 11:38:57 发布

宏辉

最新推荐文章于 2024-12-27 11:38:57 发布

阅读量2.2k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_42914989/article/details/113920389

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue全局注册组件时kebab-case和PascalCase的使用规则。kebab-case定义的组件必须用kebab-case引用，而PascalCase定义的组件则可以在引用时使用kebab-case或PascalCase。文中提供了示例代码展示如何注册和使用这两种命名方式的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue全局注册中的kebab-case和PascalCase

全局注册

全局注册的组件，可以用在所有的 Vue 实例 (new Vue) 中。

语法:

# 第一种方式
Vue.component('组件名称', { /* ... */ })

# 第二种方式
Vue.component('组件名称', 组件对象);

定义组件名:
- 使用 kebab-case（短横线命名）
```
Vue.component('my-component-name', { /* ... */ })
```
  当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
- 使用 PascalCase（帕斯卡命名）
```
Vue.component('MyComponentName', { /* ... */ })
```

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

命名组件的时候可以是kebab-case，引用时候必须是kebab-case
命名组件的时候可以是PascalCase，引用时候必须是kebab-case

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs父子通信</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 使用组件 -->
    <my-div color="red" title="我是一个div"></my-div>
    <!-- 等价于
    <div style="color: red">我是一个div</div>
    -->
</div>

<script type="text/javascript">
    // 全局注册组件
    // Vue.component('my-div', {
    Vue.component('MyDiv', {
        template: `<div :style="'color:'+ color" >{{title}}</div>`,
        props: {
            color: {type: String, required: true, default: ""},
            title: {type: String, required: true}
        }
    });
    // 创建Vue实例
    var vue = new Vue({
        el: '#app', // 渲染的html元素
        data: { // 数据对象

        }
    });

</script>
</body>
</html>

Memorial Day is 509 days
I miss you
xiaokeai