goods.vue是一個Vue組件，用于展示商店中的商品信息。它包括商品的名稱、圖片、描述和價格等屬性，為用戶提供一個直觀的購物界面。

下面是goods.vue中的代碼實現：

<template>
<div class="goods">
<div class="goods-info">
<h3>{{ goods.name }}</h3>
<img :src="goods.img" alt="{{ goods.name }}">
<p class="description">{{ goods.description }}</p>
</div>
<div class="goods-price">
<p>{{ goods.price }}</p>
<button @click="addToCart(goods)">加入購物車</button>
</div>
</div>
</template>
<script>
export default {
props: {
goods: {
type: Object,
required: true
}
},
methods: {
addToCart(goods) {
this.$emit('add-to-cart', goods);
}
}
}
</script>

該組件接收名為“goods”的對象作為參數，其中包括商品的名稱、圖片、描述和價格等屬性。組件會根據參數展示相應的商品信息，并提供一個“加入購物車”的按鈕，用于將該商品加入購物車。

在組件內部，通過Vue的props功能先聲明了一個名為“goods”的prop，類型為Object，必需的。接著，在methods中定義了一個名為“addToCart”的方法，用于在點擊“加入購物車”按鈕時觸發一個事件，將該商品加入購物車。