目錄

編寫元件細節

在註冊一個元件的時候，我們始終需要給它一個名字。比如全域性註冊的時候我們在已經會使用:

該元件名就是 Vue.component 的第一個引數。

你給予元件的名字可能依賴於你打算拿它來做什麼。當直接在 DOM 中使用一個元件 (而不是在字串模板或單檔案元件) 的時候，我們強烈推薦遵循 W3C 規範中的自定義元件名 (字母全小寫且必須包含一個連字元)。這會幫助你避免和當前以及未來的 HTML 元素相沖突。

定義元件名稱的方式有兩種:

1.使用Kebab-case

當使用 kebab-case (短橫線分隔命名) 定義一個元件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>

2.使用PascalCase

當使用 PascalCase (駝峰式命名) 定義一個元件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，儘管如此，直接在 DOM (即非字串的模板) 中使用時只有 kebab-case 是有效的。

元件巢狀子元件

在某些情況我們是需要使用到巢狀元件，也就是說元件還可以繼續巢狀元件。形成巢狀元件有兩種的實現方式。

1.父元件直接巢狀子元件

2.父元件通過插槽(slot)巢狀

插槽，也就是slot，是元件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父元件

插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模組化的特質和更大的重用性。那麼插槽(slot)分成3種分別是:單個插槽，具名插槽，作用域插槽。

3. 單個插槽

首先是單個插槽，單個插槽是vue的官方叫法，但是其實也可以叫它預設插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設定name屬性。

4.具名插槽

匿名插槽沒有name屬性，所以是匿名插槽，那麼，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個元件中出現N次，出現在不同的位置。

5.作用域插槽

作用域插槽是一種特殊型別的插槽，用作一個（能被傳遞資料的）可重用模板，來代替已經渲染好的元素。

在子元件中，只需將資料傳遞到插槽，就像你將prop傳遞給元件一樣: