vue2中组件注册后，调用时如何命名？组件传参时参数名称如何命名？

越来越好。2024-10-12 16:49

1. vue2中组件后，调用时如何命名？

场景：

javascript 复制代码

//组件注册
Vue.component('TableList', '../../../TableList.vue');

//父组件调用
//写法1 - 驼峰命名（camelCase）
<TableList/>

//写法2 - 短横线分隔（kebab-case）
<table-list/>

总结：

在 Vue 中，当你使用驼峰命名法（camelCase）注册组件时，既可以使用驼峰，也可以在模板中使用短横线分隔的名称（kebab-case）来调用组件。这是 Vue 的一个特性，它会将短横线分隔的属性名自动转换为驼峰命名法。这样做是为了兼容 HTML 和 JavaScript 的命名习惯。

注意：当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，不能使用驼峰！

2. vue2中子组件接收参数时如何声明？

场景：

javascript 复制代码

//父组件调用
<table-listplaceholder="姓名" api-key="name" />

//子组件内接收
//写法1
 props: {
    apiKey: {
      type: String,
      default: ''
    }
  }
//写法2
props: {
    'api-key': {
      type: String,
      default: ''
    }
  }

总结：

模板中：使用 - 分隔的属性名（如 api-key）。组件内部：使用驼峰命名法访问属性（如 apiKey）。这样做是为了兼容 HTML 和 JavaScript 的命名习惯。

驼峰命名法：使用 apiKey 更符合 JavaScript 的常见命名习惯，也更容易阅读。

-命名法：使用 'api-key' 可以直接与模板中的属性名对应，但在组件内部使用时需要加引号。