多個 Component 元件如何組在一起?

你可以說下面這張圖有五個 Component 元件:

1. Header
2. Sidenav
3. MainContent
4. Footer
5. 包起整個的元件(稱為root Component，也就是我們最開始學習的 App Component)

如何建立一個元件?

可以看看這篇文章 - Vue 元件 : Props in & Emit out

多個 Component 元件如何組在一起?

簡單來說整個網站就是多的元件組在一起變成一個大元件!
當我們建立多個元件後，我們需要先將單一元件註冊出來，再import進最主要呈現的App Component上。

解設，我們有一個元件為Greet.vue，需要讓他與 App.vue 組起來呈現。

export

第一步就是要 export Greet.vue
在Greet.vue內:

<template>
    <h2>hello world</h2>
</template>
<script>
    export default{
        name: "Greet",
    };
</script>

import

接下來就是在 App.vue import Greet.vue
在App.vue內:

<template>
    <Greet></Greet> 
    <Greet /> //-- 如果在Greet中沒有其他內容，可以直接這樣寫
</template>
<script>
    import Greet from 'path to Greet.vue'

    export default{
        name: "App",

        component:{
            Greet, //這邊也需要加上
        }
    };
</script>