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


Posted by hoyi-23 on 2021-08-08

你可以說下面這張圖有五個 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>

#Component







Related Posts

Todo list_Part1:前端功能

Todo list_Part1:前端功能

[css] 給點顏色瞧瞧 - hex, rgb, hsl

[css] 給點顏色瞧瞧 - hex, rgb, hsl

30-Day LeetCoding Challenge 2020 April Week 2 || Leetcode 解題

30-Day LeetCoding Challenge 2020 April Week 2 || Leetcode 解題


Comments