Nuxt (6) 建立元件

發表於 分類於
Nuxt 建立元件

建立元件

除了 nuxt-link 這種內建的元件以外，也可以建立自己的元件，做法如下:

  1. 新增 components 資料夾，並新增元件檔
1
2
- components
  - ProductCard.vue
  1. 元件檔內可用 definedProps 接受外層傳入資料
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div class="card text-center">
    <img :src="product.image" :alt="product.title" class="thumb" />
    <p class="font-bold text-gray-500 m-4 truncate">{{ product.title }}</p>
    <nuxt-link :to="`/products/${product.id}`">
      <p class="btn my-4">View Details</p>
    </nuxt-link>
  </div>
</template>

<script setup>
  const { product } = defineProps(["product"]);
</script>
  1. 在其他頁面引入元件

只要放在 components 資料夾內的元件就可以直接使用，不須另外引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <div class="grid grid-cols-4 gap-5">
      <div v-for="product in products">
        <ProductCard :product="product" />
      </div>
    </div>
  </div>
</template>

<script setup>
  definePageMeta({
    layout: 'products',
  })
  const { data: products } = await useFetch('https://fakestoreapi.com/products');
</script>