本文最核心的一点就是: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”,因此永远无法监听含有大写字母的事件。