Day14 - Vue.js 的元件篇：emits

備註

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

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

emits

昨天學了父傳給子，今天來學子傳給父
命名注意：因為 vue 會自動轉成小寫，所以資料的傳遞時使用烤肉串寫法可以避免錯誤 @add-to-cart

Topic

請在 Vue SFC Playground 樣板中使用 emits 的方式，完成下面條件：
- 將子元件 Card.vue 的「水果名稱」與「加入購物車事件」傳回父元件 App.vue，並且當點擊「加入購物車」按鈕時，能正確觸發父元件的 handleAddToCart 跳出相對應的彈跳視窗。

Result

App.vue
<template>
  <div id="app" class="container">
    <div class="row">
      <template v-for="(fruit, index) in fruitData" :key="index">
        <div class="col">
          <Card
            :imgUrl="fruit.imgUrl"
            :title="fruit.title"
            :price="fruit.price"
            :count="fruit.count"
            @add-to-cart="handleAddToCart"
          />
        </div>
      </template>

Card.vue
<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  imgUrl: String,
  title: String,
  price: Number,
  count: Number,
});
const emits = defineEmits(['add-to-cart']);
const addToCart = () => {
  emits('add-to-cart', props.title);
}
</script>
<template>
  <div class="card">
    <img :src="imgUrl" class="card-img-top" :alt="title">
    <div class="card-body">
      <h5 class="card-title">水果名稱：{{ title }}</h5>
      <p class="card-text">價錢：{{ price }}</p>
      <p class="card-text">數量：{{ count }}</p>
      <a href="#" class="btn" @click.prevent="addToCart">加入購物車</a>
    </div>
  </div>
</template>

思考與反饋

學習使用 emits 方法，由子元件傳值給父元件

接續父元件將值傳給子元件 props
宣告事件：const emits = defineEmits(['add-to-cart']);
發出 emits 事件，把值傳出去給父元件

const addToCart = () => {
  emits('add-to-cart', props.title)
}

父元件監聽 <Cart /> 發出的 add-to-cart 事件，並執行函式：@add-to-cart="handleAddToCart"

CODE

連結到 Vue SFC Playground

emits​

Topic​

Result​

思考與反饋​

CODE​

emits

Topic

Result

思考與反饋

CODE