「Vue.js 學習筆記 Day15」- Vue component 元件基本用法

Pierce Shih
皮爾斯的自學旅程
5 min readAug 3, 2019

--

程式海無涯,聽說永遠學不完,那我只好一點一點把它們寫下來囉!

使用前端框架的好處在於,很多時候同樣重複的事情,你只需要做一次,就能重複使用,並且在後面的維護上更為方便。

這篇文章我們將介紹 Vue component 元件,它通常會包含:HTML 元素(template)、綁定的資料(data)、方法(methods)跟偵聽(watch)....等不同的屬性,用法跟 Vue 實例 雷同。

什麼是元件?

Vue 應用程式的使用,主要是以 Vue component 元件 所組成,而最上層是以 Root 為主,下面包含 Header, Content 與 side (不同的 component )。

而每個 Component 當中的 data 都會是互相獨立的,然後資料傳遞時,需要仰賴下面兩種做法:

Props:由外向內傳入,特性為資料一更新,則傳入 data ,隨即更新頁面。

Emit:由內向外傳出,特性為事件觸發才更新資料,屬於事件類型。

有關資料傳遞的內容,將於後面文章再行描述,這邊先專注在元件上。

Photo Credit by Ryan Pearson from unsplash

元件使用方式

我們可以透過「Global 全域註冊」或是「Local 註冊」的方式來註冊元件,不論全域註冊或是局部註冊,都必須在 Vue 實例 之前完成。

・Global 全域註冊

如果有元件共用的需求,我們會使用Vue.component 語法來註冊一個元件,在註冊全域元件時要給予兩個參數,分別為「組件名稱」及「選項物件」,在下方範例中「組件名稱」為 component-layout「選項物件」則為其後的內容。

///// 全域註冊 /////<div id=”app”>
<component-layout></component-layout>
</div>
<script>
Vue.component("component-layout", {
template: `<div>{{text}}</div>`,
data(){
return{
text:'我是全域註冊'
}
}
});
let vm = new Vue({
el: "#app"
});
<script>

不過使用全域註冊的缺點是,不管有沒有使用到這個元件,其元件就一定會載入,因此,使用全域註冊會將原本不需要的組件載入進來,整體而言,會拖慢網頁載入的時間。

因此,若該元件不需要共用,開發者通常會使用局部註冊的方式。

・Local 局部註冊

如同前面所提,考量全域註冊的缺點,某些特定元件就會用區域註冊的方式,註冊在需要使用它的元件之中,同時,它是一個選項物件,可以由 components 這個選項物件屬性載入 Vue 實例 使用。

///// 局部註冊 /////<div id=”app”>
<component-layout></component-layout>
</div>
<script>let vm = new Vue({
el: "#app",
components:{
'component-layout' :{
template: `<div>{{text}}</div>`,
data(){
return {
text:'我是局部註冊'
}
}
}
}
});
<script>

元件中 data 必須是函式

Vue 實例 中,data 可以是 物件(Object) 或 函式(Function),但元件的 data 只能是函式(Function)。

原因是 Vue component 元件 是可以重複利用的,而且在正常的情況下,它會使用不同的資料,因此,data是函式(Function)的話,每次註冊組件,則會回傳一個新的物件。

<div id=”app”>
<my-component></my-component>
</div>
<script>
Vue.component("my-component", {
template: '<div>{{text}}</div>',
data(){
return{
text:'元件中 data 為函式'
}
}
});
let vm = new Vue({
el: "#app"
});
<script>
Photo Credit by Ryan Pearson from unsplash

結語

最近越來越覺得元件化蠻有趣的,自己也還在一步一步摸索Vue component 元件 的內容,前幾天終於看懂元件互相傳遞資料是怎麼一回事了(撒花)。

而這也是下兩篇文章所要分享的內容,分別為 PropsEmit,敬請期待。

謝謝你的閱讀!如果有任何想法,也歡迎留言與我分享~如果願意給我一些小小鼓勵,請給我 1–20 個拍手;
如果覺得文章對你有點幫助,請給我 21-30 個拍手;
如果非常喜歡我的技術筆記,請長按拍手按鈕(50個拍好拍滿)讓我知道哦 👏🏻最後,若希望持續追蹤我的最新文章,別忘了追蹤 皮爾斯的自學旅程 唷,乾溫 :D

--

--

Pierce Shih
皮爾斯的自學旅程

Leading business growth with product mindset and technical perspective