Vue - 驼峰和短横线分割命名注意事项

• 一. 驼峰和短横线分割命名注意事项
• • 1.1 组件注册命名
  • 1.2 父子组件数据传递时命名
  • 1.3 父子组件函数传递

一. 驼峰和短横线分割命名注意事项

我们一般定义组件的方式有两种：

• 短横线分隔命名：kebab-case。
• 首字母大写命名：PascalCase 。

1.1 组件注册命名

例如，我写一个简单的子组件。

注册的时候采用PascalCase命名：

createApp(App).component('MyComponent', MyComponent).mount('#app')

使用的时候：

结果如下：

自定义的组件在使用上，命名的规则如下：

• 注册的时候：使用了PascalCase命名。
• 使用的时候：可以使用PascalCase命名（首字母不区分大小写）或者kebab-case命名（每个单词的首字母不区分大小写）。

一般编码的时候，习惯这样：命名的时候采取PascalCase命名法，使用的时候采取kebab-case法（每个单词的首字母小写）。

1.2 父子组件数据传递时命名

父组件在给子组件传递变量的时候，如果变量名称采用kebab-case法，那么子组件在接收的时候应该写驼峰命名法。

例如，我再父组件中这么传参：

子组件的接收：驼峰命名法。

效果如下：

1.3 父子组件函数传递

父组件在传递给子组件的时候，命名上我测试下来没有什么特殊的要求。先说下传递的命名上：

父组件传递：

const sayHello =  ()=>{console.log('Hello')
}

子组件的接收上：

结果如下：无论是使用下划线分割还是原名，都可以正常接收。

经过测试，父组件在传函数的时候，使用kebab-case法，和上述案例一个效果。

因此我们就这么约定吧：

• 父组件传递函数的时候，就原名传入即可。