以下根據《Vue.js實戰》這本書寫的組件介紹內容，內容比較基礎，之前寫過關於組件的一些內容，但對於入門級別的有些難度，故將此書中的組件介紹內容編寫如下。

組件是Vue.js最核心的功能，也是整個框架設計最精彩的地方，當然也是最難掌握的

為什麼使用組件

在正式介紹組件前，我們先來看一個簡單的場景，如圖所示：

上圖中是一個很常見的聊天界面，有一些標準的控件，比如右上角的關閉按鈕、輸入框、發送按鈕等。你可能要問，這有什麼難的，不就是幾個div、input嗎？好，那現在需求升級了，這幾個控件還有別的地方要用到。沒問題，複製粘貼唄。那如果輸入框要帶數據驗證，按鈕的圖標支持自定義呢？這樣用JavaScript封裝後一起復制吧。那等到項目快完結時，產品經理說，所有使用輸入框的地方，都要改成支持回車鍵提交。好吧，給我一天的時間，我一個一個加上去。

上面的需求雖然有點變態，但卻是業務中很常見的，那就是一些控件、JavaScript能力的複用。沒錯，Vue.js的組件就是提高重用性，讓代碼可複用。針對上面的需求，用Vue.js的組件可以很輕鬆的是實現。

劃重點：Vue.js組件的價值，提高代碼重用性。

我們先看一下示例用組件來編寫時怎樣的：

是不是很奇怪，有很多我們從來都沒有見過的標籤，比如：、、、和等，而且整段代碼除了內聯的幾個樣式外，一句CSS代碼也沒有

這些沒有見過的自定義標籤就是組件，每個標籤代表一個組件，在任何使用Vue的地方都可以直接使用。接下來，我們就來看看組件的具體用法。

組件用法

回顧一下我們創建Vue實例的方法:

組件與之類似，需要註冊後才可以使用。註冊有全局註冊和局部註冊兩種方法。全局註冊後，任何Vue實例都可以使用。全局註冊示例代碼如下：

my-component就是註冊的組件自定義標籤名稱，推薦使用小寫加減號(‘-’)分割的形式命名。

要在父實例中使用這個組件，必須要在實例創建前註冊，之後就可以用的形式來使用組件了，示例代碼如下：

此時打開頁面還是空白的，因為我們註冊的組件沒有任何內容，在組件選項中添加template就可以顯示組件內容了，示例如下：

渲染後的結果：

template的DOM結構必須被一個元素包含，如果直接寫成“這裡是組件的內容”，不帶“

”是無法渲染的。還有：template下只能有一個根元素。

在Vue實例中，使用components選項可以局部註冊組件，註冊後的組件只有在該實例作用域下有效。組件中也可以使用components選項來註冊組件，使組件可以嵌套。示例代碼如下：

Vue組件的模板在某些情況下會受到HTML的限制，比如：

內規定只允許是、

、

等這些表格元素，所以在內直接使用組件是無效的。這種情況下，可以使用特殊的is屬性來掛載組件，示例代碼如下： tbody在渲染時，會被替換為組件裡面的內容。 除了template選項外，組件中還可以像Vue實例那樣使用其他的選項，比如：data、computed、methods等但是使用data時，和實例稍有區別，data必須是函數，然後將數據return出去。例如： JavaScript對象是引用關係，所以如果return出的對象引用了外部的一個對象，那這個對象就是共享的，任何一方修改都會同步。比如下面的示例： 組件使用了3次，但是點擊任意一個,3個的數字都會加1，那是因為組件的data引用的是外部的對象，這肯定不是我們期望的效果，所以給組件返回一個新的data對象來獨立，示例代碼如下： 這樣點擊3個按鈕就互不影響了，完全達到複用的目的。 總結： 1.組件分全局註冊與局部註冊 2.組件的template下只能有一個根節點 3.用is屬性設置模板突破html的限制 4.組件的data必須是函數，然後將數據return出來 5.組件data裡面的數據可共享於同一個共有的Data對象

---

分享到:

---

閱讀更多 七音說 的文章

關鍵字: 2018頭條記憶 編程語言 JavaScript

---