###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day6 關於 Vue.component

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

Vue應用主要是以多個元件搭建起來的，而每個Component中的data都是獨立的
若需資料傳遞，會使用`props`或`emit`兩種方式

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

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

>關於資料傳遞的部分先簡單帶過，之後再詳談，這篇先專注在元件上

### 元件的使用方式
在`Vue實例`建立之前，可以透過==全域註冊==或==區域註冊==來註冊元件
<font style="color:red">※注意是實例建立之前</font>

:::info
**全域註冊方式**
:::
全域註冊使用在元件有共用需求時，使用`Vue.component`語法註冊元件，如下

<div id="app">
    <component-layout></component-layout>
</div>

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

可以看到`Vue.component`共需要傳入兩個參數
分別是組件名稱(`component-layout`)及選項物件(`data` & `template` & ...)

>由於是全域註冊，不管有沒有使用到都會加載，影響網頁加載效率
因此若沒有共用需求，通常會使用區域註冊

:::info
**區域註冊方式**
:::

基於前面提到全域註冊的缺點，有另一種區域註冊的方式，只註冊在需要他的實例中，像醬子

<div id="app">
    <component-layout></component-layout>
</div>

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

或是這樣也行，其實也就是另外定義好`component`的內容再丟進去而已

var text_template ={
        'component-layout' :{
            template: `<div>{{text}}</div>`,
            data(){
                return {
                    text:'這樣是局部註冊'
                }
            }
        }
    }

let vm = new Vue({
    el: "#app",
    components: text_template
});

### 注意：元件中data必須是函式

在一般Vue實例中，data可以是物件也可以是函式

var vm = new Vue({
    el: "#app",
    data: {
        text: '這樣是物件' 
    }
});

or

var vm = new Vue({
    el: "#app",
    data(){
        return {
            text: '這樣是函式' 
        }
    }
});

但在==元件中的`data`只能用函式==的方式

因為是`Vue component`元件是可以重複利用的，而通常重複利用都會是==不同的資料==
因此`data`是函式的話，註冊時會==回傳新的物件==，避免互相影響

---

*參考資料: https://reurl.cc/rDnrxZ*
*參考資料: https://reurl.cc/q53rdE*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*