EP20 - ex6. Simple Component

終於來到最後一個基礎範例！
沒想到堅持下去也來到ep20了～
總覺得三分鐘熱度的我，能撐到多久呢？
為什麼薪資沒有漲～噗！快來結束這個簡單範例～

最後一個範例，是兩個檔案，引進寫好的TodoItem.vue！

Ex6SimpleComponent.vue

<script setup>
import { ref } from 'vue'
import TodoItem from './TodoItem.vue'

const groceryList = ref([
    { id: 0, text: 'Vegetables' },
    { id: 1, text: 'Cheese' },
    { id: 2, text: 'Whatever else humans are supposed to eat' }
])
</script>

<template>
    <p>Example 6:</p>
    <ol>
        <TodoItem v-for="item in groceryList" :todo="item" :key="item.id"></TodoItem>
    </ol>
</template>

<Script>

• import 和 ref:
  • ref 從 Vue 中引入，用於創建響應式變數。
  • TodoItem 從 ./TodoItem.vue 中引入，作為待辦事項項目的子組件。
• groceryList:
  • 使用 ref 創建一個響應式變數 groceryList，其初始值是一個包含三個待辦事項物件的陣列，每個物件都有 id 和 text 屬性。

<Template>

• 有序列表 <ol>:
  • 使用 <ol> 標籤創建一個有序列表。
  • 使用 v-for 指令遍歷 groceryList 陣列，對於每個 item，創建一個 TodoItem 組件實例，並將 item 作為 todo 屬性傳遞給 TodoItem 組件。每個 TodoItem 組件的 key 屬性設為 item.id 以保持列表的穩定性。

TodoItem.vue

<script setup>
const props = defineProps({
    todo: Object
})
</script>

<template>
    <li>{{ todo.text }}</li>
</template>

<Script>

defineProps:

• 使用 defineProps 定義 props，其中 todo 是一個物件，這個物件將從父組件 Ex6SimpleComponent.vue 傳遞過來。

<Template>

列表項 <li>:

• 使用 <li> 標籤顯示 todo.text，這裡的 todo 是從父組件傳遞過來的待辦事項物件，顯示該待辦事項的文本內容。

喔喔喔！！！之前文件理頭都看不太懂～原來
defineProps就是定義父組件傳進子組件的物件！
再從子組件看怎麼運用這個物件～

補充 <ol> 與 <li>

<ol> 標籤

<ol> (Ordered List) 標籤用於創建有序列表。列表中的項目會自動生成編號，通常以數字 (1, 2, 3, ...) 顯示。

<li> 標籤

<li> (List Item) 標籤用於定義列表中的每個項目。它可以用於有序列表 (<ol>) 或無序列表 (<ul>)。

<ol>
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ol>  

在這個範例中，<li> 標籤包裹每個列表項目，這些項目被自動編號。

完成六個範例！