Day12 - Vue.js 的元件篇：Component

備註

本站 Vue 的撰寫風格都是 Composition API

2025 Vue 直播班每日任務，藉由一天學一點積沙成塔

元件

區域註冊 (一般元件常用) ：每一個 .vue 都可以看作是一個元件，可以無限 import 其他元件，沒有層級的問題

全域註冊 (套件、Loading) ：是直接到 main.js 來作 import

位置在 createApp 後方
寫法是：('元件名稱', 元件)

  import App from './App.vue'
  import router from './router'
  import './assets/all.scss'

  import Card from './components/Card.vue'

  const app = createApp(App)
  app.use(router)

  app.component('Card', Card)

  app.mount('#app')

Topic

請把 Vue SFC Playground 樣板上方的 header、下方的 footer 分別拆成二個元件：Header、Footer。並且能夠正確的呈現在畫面之上。

Result

App.vue
<script setup>
import { ref } from 'vue'
import Header from './Header.vue'
import Footer from './Footer.vue'

</script>
<template>
  <Header />
  <Footer />
</template>

Header.vue
<template>
  <div>
    <header>
      <h1>六角水果行</h1>
      <ul>
        <li>產品資料</li>
        <li>聯絡我們</li>
        <li>公司資訊</li>
      </ul>
    </header>
  </div>
</template>

Footer.vue
<script setup></script>

<template>
  <footer>
    <p>六角股份有限公司</p>
  </footer>
</template>
<style scoped>
footer {
  margin-top: 15px;
  background-color: beige;
  padding: 30px 0;
  text-align: center;
}
</style>

思考與反饋

元件的引入很容易，import 就好了
難的是在後面的傳值，所以元件部份就先暫時這樣

CODE

連結到 Vue SFC Playground

元件​

Topic​

Result​

思考與反饋​

CODE​

元件

Topic

Result

思考與反饋

CODE