VueJS 组件参数名命名与组件属性转化问题

VueJS 组件能够让我们用单个组件来定义特定状态下的 UI。在组件内部，通常会存在着 props 对象，用于指定组件的外部属性。然而，在指名组件属性的时候，一些参数名可能会被转化成别的名称，这给开发者造成了很多困扰。下面就是完整的攻略，涵盖了参数名命名和属性转换两个方面。

组件参数名命名

Vue 组件参数名的使用一般分为 kebab-case、camelCase、PascalCase 三种方式，具体推荐使用 kebab-case。kebab-case 是一种命名方式，是在规定的单词之间用连字符 - 分离的。例如:

<my-component prop-name="value"></my-component>

上述代码中，prop-name 就是 Vue 组件的参数名称，即将传递给组件的父组件的属性名称。在组件内部，它可以通过使用 props 访问到。

在使用 Vue 组件参数名时，还需注意以下问题：

1. 传递参数时，时刻注意使用 kebab-case

通过使用 kebab-case，可以确保在 browsers 和 tooling 中的一致性，同时也使得正在显示的组件的用法更加易于推断。

2. Vue 组件命名时，统一使用 camelCase

Vue 组件是可以复用的，自然也就需要命名规范要严格，所以，在 Vue 组件命名时，推荐使用 camelCase。

Vue 组件属性转化

Vue 组件属性转化会自动将 kebab-case 的 props 名称转化为 camelCase 的变量名称。例如，prop-name 会被转换成 propName。这可能会让您的代码变得难以识别，因此，如果你需要提供一个 camelCase 的 props 名称，推荐你直接使用 props，而不是在模板中使用 kebab-case 的属性名称。

以下是一个示例：

<template>
  <div>
    <child :myProp="message" />
  </div>
</template>
<script>
export default {
  components: {
    child: {
      props: ['myProp']
    }
  },
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

在上面的示例中，我们使用了子组件 child 和 props myProp。myProp 是 kebab-case 的属性名称，但是在子组件中，该属性将会被转换成 camelCase 的 myProp 变量，以匹配 JavaScript 的命名规则。

再举一个跨组件传递的示例：

<parent>
  <child :foo-bar="baz" />
</parent>

在上述示例中，我们将 foo-bar 属性作为父组件传递给 child 子组件。然而，由于 kebab-case 的属性名称将被转换成 camelCase 的变量名称，所以在子组件中，该属性将会被转换成 fooBar。我们需要在子组件内部使用 fooBar 进行访问，而不是 foo-bar。

总之，Vue 组件参数名和属性转化问题是 Vue 组件的两个关键方面，开发者需要时刻注意命名规范的使用、属性转化的实现。