以下根據《Vue.js實戰》這本書寫的組件介紹內容,內容比較基礎,之前寫過關於組件的一些內容,但對於入門級別的有些難度,故將此書中的組件介紹內容編寫如下。
組件是Vue.js最核心的功能,也是整個框架設計最精彩的地方,當然也是最難掌握的
為什麼使用組件
在正式介紹組件前,我們先來看一個簡單的場景,如圖所示:
上圖中是一個很常見的聊天界面,有一些標準的控件,比如右上角的關閉按鈕、輸入框、發送按鈕等。你可能要問,這有什麼難的,不就是幾個div、input嗎?好,那現在需求升級了,這幾個控件還有別的地方要用到。沒問題,複製粘貼唄。那如果輸入框要帶數據驗證,按鈕的圖標支持自定義呢?這樣用JavaScript封裝後一起復制吧。那等到項目快完結時,產品經理說,所有使用輸入框的地方,都要改成支持回車鍵提交。好吧,給我一天的時間,我一個一個加上去。
上面的需求雖然有點變態,但卻是業務中很常見的,那就是一些控件、JavaScript能力的複用。沒錯,Vue.js的組件就是提高重用性,讓代碼可複用。針對上面的需求,用Vue.js的組件可以很輕鬆的是實現。
劃重點:Vue.js組件的價值,提高代碼重用性。
我們先看一下示例用組件來編寫時怎樣的:
是不是很奇怪,有很多我們從來都沒有見過的標籤,比如:
這些沒有見過的自定義標籤就是組件,每個標籤代表一個組件,在任何使用Vue的地方都可以直接使用。接下來,我們就來看看組件的具體用法。
組件用法
回顧一下我們創建Vue實例的方法:
組件與之類似,需要註冊後才可以使用。註冊有全局註冊和局部註冊兩種方法。全局註冊後,任何Vue實例都可以使用。全局註冊示例代碼如下:
my-component就是註冊的組件自定義標籤名稱,推薦使用小寫加減號(‘-’)分割的形式命名。
要在父實例中使用這個組件,必須要在實例創建前註冊,之後就可以用
此時打開頁面還是空白的,因為我們註冊的組件沒有任何內容,在組件選項中添加template就可以顯示組件內容了,示例如下:
渲染後的結果:
template的DOM結構必須被一個元素包含,如果直接寫成“這裡是組件的內容”,不帶“
”是無法渲染的。還有:template下只能有一個根元素。在Vue實例中,使用components選項可以局部註冊組件,註冊後的組件只有在該實例作用域下有效。組件中也可以使用components選項來註冊組件,使組件可以嵌套。示例代碼如下:
Vue組件的模板在某些情況下會受到HTML的限制,比如:
、 | 等這些表格元素,所以在 |
---|
閱讀更多 七音說 的文章
關鍵字: 2018頭條記憶 編程語言 JavaScript