# 元件 (4-1)
###### tags: `Vue`、`4. 元件`
2022.3.3

### 1. 元件優勢
* 增加程式碼可複用性
* 避免單一檔案過大 (一個好的網頁，code範圍在200~300區間)
* 易於管理及協作
* 元件功能獨立化

### 2. 註冊元件手法
* 元件需要再createApp後，mount前進行定義。
* 元件需指定一個特定名稱。
* 元件結構與最外層的根原件結構無異(除了增加Template的片段)
* 原件另有prop，emits等資料傳遞及事件傳遞

#### 全域註冊
  在createApp下任何元件都可以運用，在中小型專案、一般網頁開發很方便。


* 第一種寫法形式

<oldmoon></oldmoon>

<script>
    const app = Vue.createApp({
        data(){
            return{
                text:"這是內部文字",
            }
        },
    }).component('oldmoon',{
        data(){
            return{
                text:"這式元件文字",
            }
        },
        template:`<input type="text" v-model="text">`
        }).mount('#app')
</script>

* 第二種寫法

<oldmoon></oldmoon>
<script>
    const app = Vue.createApp({
        data(){
            return{
                text:"這是外部文字",
            }
        },
    })
    app.component('oldmoon',{
        data(){
            return{
                text:"這是外部文字",
            }
        },
        template:`<input type="text" v-model="text">`
    }).mount('#app');
</script>

* 掛載多個全域元件

<script>
    const app = Vue.createApp({
        data(){
            return{
                text:"這是內部元件"
            }
        }
    });
    
    app.component('oldmoon',{
        data(){
            return{
                text:"這是外部元件1"                 }
        },
        template:`<input type="text" v-model="text">`
    }).component('oldmoon1',{
        data(){
            return{
                text:"這是外部元件2"
            }
        },
        template:`<input type="text" v-model="text">`
    }).mount("#app");
</script>

#### 區域註冊
  限制特定元件下才可使用，在Vue Cli中很常使用此方法。(便於管理)
* 掛載在app下的元件

<oldmoon></oldmoon><br>
<oldmoon1></oldmoon1>

<script>
    const oldmoon = {
        data(){
            return{
                text:'這是外部資料1'
            }
        },
        template:`<input type="text" v-model="text">`
    }
    
    const oldmoon1 = {
        data(){
            return{
                text:'這是外部資料2'
            }
        },
        template:`<input type="text" v-model="text">`
    }
    
    const app = Vue.createApp({
        data(){
            return{
                text : "這是內部資料"
            }
        },
        components:{
            oldmoon,
            oldmoon1
        }
    })
    
    app.mount('#app')
</script>

* 掛載在元件中的元件，只作用於此元件。

<oldmoon1></oldmoon1>
<script>
    const oldmoon2 = {
        data(){
            return{
                text:"這是元件2"
            }},
            template:'<h3>{{ `${text}:`}}</h3>'
        };
    
    const app = Vue.createApp({
        data(){
            return{
                text:"這是內部資料"
            }}
    }).component('oldmoon1',{
        data(){
            return{
                text:"這是外部元件1"
        }},
        components:{
            oldmoon2
        },
        template:`<oldmoon2></oldmoon2> <input type="text">`
    }).mount('#app')
    
</script>

#### 模組化
  同屬於區域註冊，Vue Cli忠實站運用技巧

檔案:「component.js」

    export const oldmoon1 = {
        data(){
            return{
                text:'這是外部模組匯入元件1'
            }},
        template:`<input type="text" v-model="text">`
    };
    
    export const oldmoon2 = {
        data(){
            return{
                text:'這是外部模組匯入元件2'
            }},
        template:`<input type="text" v-model="text">`
    }

檔案:「index.html」

<oldmoon1></oldmoon1><br>
<oldmoon2></oldmoon2>

<script type="module">
    import {oldmoon1,oldmoon2} from './component.js';
    
    const app = Vue.createApp({
        data(){
            return{
                text:'這是內部資料'
            }
        },
        components:{
            oldmoon1,
            oldmoon2
        }
    }).mount("#app")
</script>