雖然在前面已經都有使用過 component 了，但還是想要加強這個部分的理解

元件化觀念

• 把畫面切成可重複使用的小區塊（積木）
• 每個元件都有自己的 state 和 logic，互不干擾(低耦合)
• 組件之間可以以 tree 的形式組合（父子關係）

元件資料傳遞 props

props 就是一種讓父元件將資料傳遞給子元件的機制，我會將其理解為一種 attribute / parameter ，讓子元件能夠接收並顯示來自上層的資料，且流動方向是單向的，只能由父元件傳到子元件，子元件不能修改父元件傳來的資料

Vue2 的寫法

component:

<template>
  <div class="post">
    <h2>{{ title }}</h2>
    <p>👍 {{ likes }} likes</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    likes: Number
  }
}
</script>

<style scoped>
.post{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: x-large;
    border: solid;
    margin-left: 450px;
    margin-top: 5px;
    height: 175px;
    width:250px;
    padding: 35px;
}
</style>

App:

<script>
import PostItem from './components/props.vue'

export default {
  components: { PostItem }
}
</script>

<template>
  <div>
    <PostItem title="Vue 2" :likes="100" />
    <PostItem title="Options API" :likes="50" />
  </div>
</template>

Vue3 的寫法

component:

<script setup>
    const props = defineProps({
        title: String,
        likes: Number
    })
</script>

<template>
    <div class="post">
        <h2>{{ title }}</h2>
        <p>👍 {{ likes }} likes</p>
    </div>
</template>


<style scoped>
.post{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: x-large;
    border: solid;
    margin-left: 450px;
    margin-top: 5px;
    height: 175px;
    width:250px;
    padding: 35px;
}
</style>

App:

<script setup>
import PostItem from './components/props.vue'
</script>

<template>
  <PostItem title="Vue 3" :likes="200" />
  <PostItem title="Composition API" :likes="150" />
</template>

兩種寫法都可以，個人覺得 Vue3 似乎稍微簡潔一點

ref:
https://book.vue.tw/CH2/2-2-communications.html
https://zh-hk.vuejs.org/guide/components/props.html