如上圖，在網頁上有許多的元件，像是 header，aside，footer 等重複性較高的元件，就可以透過這次要使用 x-template 來引入模組，並重複使用，在專案是就可以省下許多時間，與之前直接拆模組時使用的模板語法不同。
元件資料獨立與傳遞
如上圖所示，每一個元件的資料都是獨立的，只有該元件可以讀取到自己的 data，所以就算命名相同，也不會互相影響，當然在實務開發的時候避免自己搞混，還是會做不一樣的命名方式。
拆分元件後，因為資料彼此無法給對方使用，如果上圖的 side 資料要給 component 使用該怎麼做？
資料由外層傳向內層 props
若要將外層的資料傳給內層的資料，可以使用 props 的方法，當 side 資料更新時，就會同步的更新給 component。
簡單講就是被動技能。
資料由內層傳向外層 emit Event
當內層資料要傳給外層時，可以使用 emit 方法，英文中有包含 event 的這個單字，所以它需要一個事件產生，才能使用該方法將資料傳送，並且只有透過事件產生時，才會傳遞資料給外層，所以並不是內層資料更新後，就會自動更新給外層的元件。
簡單講就是主動技能。
SPA 的網頁，也是透過元件搭配路由而產生出來的。