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

Pierce Shih

Published in

皮爾斯的自學旅程

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>

結語

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

而這也是下兩篇文章所要分享的內容，分別為 Props 和 Emit，敬請期待。

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

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