Vue 基礎篇(二)：Vue命名注意事項

本文最核心的一點就是：HTML 是大小寫不敏感的，在 DOM 模板中必須使用 kebab-case（myDiv與mydiv在DOM模版中是等同的）。如下的內容所說起的注意事項都是基於這條核心的。

1、組件名稱注意事項

組件名應該始終是多個單詞的，根組件 App 除外。

這樣作能夠避免跟現有的以及將來的 HTML 元素相沖突，由於全部的 HTML 元素名稱都是單個單詞的。

// 推薦寫法
Vue.component('todo-item', {
  // ...
})
// 推薦寫法
export default {
  name: 'TodoItem',
  // ...
}
複製代碼

2、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」匹配。

3、$emit()傳遞的事件名稱注意事項

vue使用$emit時，$emit傳入的事件名稱只能使用小寫，不能使用大寫的，不然父組件沒法監聽到子組件的事件。

推薦寫法
//監聽事件
v-on:enlarge-text="xxx"
// 觸發事件
$emit('enlarge-text')
複製代碼

若是在$emit中的事件命名爲「enlargeText」，v-on監聽的事件更改成「enlargeText」，可是因爲DOM不敏感大小寫，因此會被解讀爲「enlargetext」，所以永遠沒法監聽含有大寫字母的事件。