当前位置：首页 > news >正文

Vue3难以统一的命名规范

news 2026/3/27 1:43:17

1 至少保持两个单词

上面这个比较容易保证，其目的好像是防止和html标签冲突，不易于识别，我在另一篇文章中也吐槽过这个问题。

vue3脚手架示例工程中组件vue文件，除了App.vue是单个单词，其他的基本都是双字母，如下图

组件使用类似如下：

通过上面的示例，我们就认为文件名和组件名字是一样的。但是这个玩意开了一个口子，在TheWelcome 文件中你可以定义组件的名字叫xx。这个name通常不会用，默认组件名字就是和文件名字一样。需要重新取名字的情况是Eslint检查到你的文件名是单个单词，如Home.vue 那个就要求你的文件名必须是两单词的，如果你不想改文件名，你就可以在Home.vue文件中整个名字叫HomeView。这可能会导致你看见组件名字，不知道是对应那个文件，所以还是建议改文件名。

2 组件使用名字决策

这个就相当难搞了,看上面的例子，你会肯定会认为组件使用的时候和文件名保持一致，但是当你用了element-plus组件时，你发现它的标签用的时候横杠，如el-table-column。好这个就相当炸裂了。你会怎么做，如果你有点洁癖，我相信你会将<TheWelcome/> 改成<the-welcome/>，保持统一，而且VS Code输入提示得时候也是the-welcome，看起来很美好，一箭双雕。我想说你高兴得太早了。TypeScript出来做一把妖，看如下代码：

我的子类代码如下： //AddConfig.vue const dialogFormVisible = ref(false) //展示弹出框 function showAddPop() { dialogFormVisible.value = true } //暴露给父类调用 defineExpose({ showAddPop, }) //父组件代码如下 <div><add-config ref="addConfigEl"></add-config>xx</div> //下面这个声明一个元素引用，看起来相当蛋疼，这能提升开发效率，表示无法理解， const addConfigEl = ref<InstanceType<typeof AddConfig> | null>(null) const addConfig = () => { if (addConfigEl.value) { addConfigEl.value.showAddPop() } else { alert('xxxx') } } 父组件代码中如果不把add-config 改成AddConfig addConfig 中addConfigEl.value就会提示找不到showAddPop，实际上就是识别不了add-config

这下只能改回来，不知道该怎么办了，就是这样随便整。