2 | Vue components
(opensnewwindow)[1]元件系統(componentssystem)是Vue.js另一個重要的概念與核心功能。在上一個章節,已經介紹了Vue.js的基本結構與功能,那麼從本章開始,將為各位讀者解說元件的拆解、結構,以及元件間狀態的溝通傳遞等功能。備註自此章節開始,程式碼內若未特別說明,皆以Vue3.x版本為主。什麼是元件元件(Component)是Vue最主要也是最強大的特性之一,它提供了HTMLDOM元素的擴充性,也可將部分模板、程式碼封裝起來以便開發者維護以及重複使用。傳統網頁的結構,從早期的「義大利麵式程式碼」(Spaghetticode)把所有的東西通通往HTM...
(opens new window)[1]
元件系統 (components system) 是 Vue.js 另一個重要的概念與核心功能。
在上一個章節,已經介紹了 Vue.js 的基本結構與功能,那麼從本章開始,將為各位讀者解說元件的拆解、結構,以及元件間狀態的溝通傳遞等功能。
備註
自此章節開始,程式碼內若未特別說明,皆以 Vue 3.x 版本為主。
什麼是元件元件 (Component) 是 Vue 最主要也是最強大的特性之一,它提供了 HTML DOM 元素的擴充性, 也可將部分模板、程式碼封裝起來以便開發者維護以及重複使用。
傳統網頁的結構,從早期的「義大利麵式程式碼」(Spaghetti code) 把所有的東西通通往 HTML 頁面塞, 到後來將 CSS、Javascript 從 HTML 結構抽離,這是表現層級上的關注點分離。
但是當專案的架構越來越大,人們開始把「關注點」從表現層移到了架構層面, 思考如何將功能、邏輯抽象化,將封裝好的 UI 模組、功能重複使用,就如同樂高積木一般。
<div id="app"> <header-component> ... </header-component> <menu-component> ... </menu-component> <main-component> ... </main-component> <footer-component> ... </footer-component> </div>123456
每一個被封裝後的元件單元,都含有自己的模板、樣式,與行為邏輯,並且可以被重複使用。 而在元件之中又可以含有元件,這樣由一個個元件單元組合而成的「元件樹」,就是 Vue.js 元件系統的概念。
元件的分類與切分當我們開始要把網頁轉換成模組區塊來管理的時候,首先面臨的問題,元件該怎麼拆? 從何拆起?
要是範圍...