Vue 基础篇(二):Vue命名注意事项

2,605 阅读1分钟

本文最核心的一点就是:HTML 是大小写不敏感的,在 DOM 模板中必须使用 kebab-case(myDiv与mydiv在DOM模版中是等同的)。以下的内容所提及的注意事项都是基于这条核心的。

一、组件名称注意事项

组件名应该始终是多个单词的,根组件 App 除外。

这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。

// 推荐写法
Vue.component('todo-item', {
  // ...
})
// 推荐写法
export default {
  name: 'TodoItem',
  // ...
}

二、props名称注意事项

在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。

我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

// 推荐写法
props: {
  greetingText: String
}
<WelcomeMessage :greeting-text="hi"></WelcomeMessage>

如果在HTML仍然使用“greetingText”,因为DOM不敏感大小写,所以会被解读为“greetingtext”,无法于props中的“greetingText”匹配。

三、$emit()传递的事件名称注意事项

vue使用$emit时,$emit传入的事件名称只能使用小写,不能使用大写的,否则父组件无法监听到子组件的事件。

推荐写法
//监听事件
v-on:enlarge-text="xxx"
// 触发事件
$emit('enlarge-text')

如果在$emit中的事件命名为“enlargeText”,v-on监听的事件更改为“enlargeText”,但是由于DOM不敏感大小写,所以会被解读为“enlargetext”,因此永远无法监听含有大写字母的事件。