嵌入其他元件

Vue、React 等都是一個一個元件組成頁面的概念，一個元件裡會包含許多其他的元件，接著來看看元件如何嵌入。

先新增一個 SiteFooter.vue，內容可自訂，接著打開 App.vue，在<script></script>裡import模組，方法如下

<script>
  import SiteFooter from '@/components/SiteFooter'    // 載入組件
  export default {
    name: 'app',
    components: {
      SiteFooter        // 宣告組件
    }
  }
</script>

接著在<template></template>裡插入 SiteFooter 元件，執行後無報錯的話就成功囉～

<template>
  <div id="app">
    ...
    <router-view/>
    <!-- 插入 footer.vue -->
    <SiteFooter></SiteFooter>
  </div>
</template>

** 貼心小提醒：命名最好不要和原生 HTML 標籤相同，如上述例子，假使載入時命名為 footer，以<footer></footer>插入，會發現執行時 console.log 會出現下面錯誤，導致元件無法渲染。