在 Vue 3 框架中，組件化是構建應用程式的核心概念之一。通過將應用程式分解為更小的組件，不僅可以提高代碼的可重用性，還能簡化代碼的維護與管理。然而，隨著組件數量和應用規模的增長，如何實現組件間的有效通信成為一個重要問題。Vue 3 提供了多種方式來解決組件間的通信需求，其中最常用的便是 props 和 emits。

props：父組件向子組件傳遞數據

props 是 Vue 3 中父組件向子組件傳遞數據的主要機制。通過 props，父組件可以將自身的數據以屬性的形式傳遞給子組件，從而實現父子組件間的數據共享。

基本使用方法

在 Vue 3 中，我們可以在子組件內通過 props 來定義接收的數據。父組件則可以通過綁定屬性來傳遞數據。以下是一個簡單的例子，展示了如何通過 props 來實現父組件向子組件傳遞數據：

子組件

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

父組件

<template>
  <div>
    <ChildComponent message="來自父組件的訊息" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

在這個例子中，父組件將一個名為 message 的 props 傳遞給子組件。props 在子組件內被定義為一個必須的 String 類型，並且會在模板內顯示。

props 的類型檢查與默認值

Vue 3 支持對 props 的類型進行檢查。當父組件傳遞的數據不符合 props 定義的類型時，Vue 會在開發模式下發出警告。此外，還可以為 props 設置默認值，當父組件未提供該屬性時，子組件將使用默認值。

props: {
  count: {
    type: Number,
    default: 0
  }
}

在這個例子中，count 是一個數字型的 props，如果父組件沒有傳遞 count，那麼子組件將使用默認值 0。

單向數據流

props 在 Vue 中遵循單向數據流的規則，即數據只能從父組件流向子組件，不能反向流動。這樣的設計確保了數據的穩定性和可預測性。如果需要從子組件傳遞數據回父組件，我們可以使用 emits 機制來實現。

emits：子組件向父組件傳遞事件

emits 是 Vue 3 中子組件向父組件傳遞事件的主要方式。當子組件內發生一些事件（如用戶操作或數據變更）時，子組件可以通過 $emit 發出一個事件，父組件則可以通過監聽這個事件來作出響應。

基本使用方法

子組件通過 $emit 發出自定義事件，父組件可以使用 v-on 或縮寫 @ 來監聽這些事件。
子組件

<template>
  <button @click="notifyParent">點擊我</button>
</template>

<script>
export default {
  emits: ['notify'],
  methods: {
    notifyParent() {
      this.$emit('notify', '子組件發送的消息');
    }
  }
};
</script>

父組件

<template>
  <ChildComponent @notify="handleNotify" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleNotify(message) {
      alert(message);
    }
  }
};
</script>

在這個例子中，子組件在按下按鈕後會發出一個名為 notify 的自定義事件，並將一條消息傳遞給父組件。父組件則通過監聽這個事件，並在接收到事件後彈出一個提示框顯示消息。

emits 的事件驗證

在 Vue 3 中，emits 不僅支持事件的發送，還提供了事件驗證功能。當我們定義 emits 時，可以添加一個驗證函數來檢查事件發送時的參數是否符合要求。

emits: {
  notify(payload) {
    if (typeof payload === 'string') {
      return true;
    } else {
      console.warn('事件參數必須是字符串');
      return false;
    }
  }
}

在這個例子中，我們定義了 notify 事件的驗證函數，該函數檢查事件的參數是否為字符串。如果參數不是字符串，會在控制台顯示警告信息，並且事件不會發送。

props 與 emits 的協同使用

在實際開發中，props 和 emits 通常是配合使用的。父組件可以通過 props 向子組件傳遞初始數據，子組件則可以通過 emits 發送事件來通知父組件數據的變化。例如，我們可以使用 props 傳遞初始狀態，並通過 emits 在子組件內改變狀態時通知父組件。

父組件

<template>
  <ChildComponent :initial-count="count" @update-count="handleCountUpdate" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleCountUpdate(newCount) {
      this.count = newCount;
    }
  }
};
</script>

子組件

<template>
  <div>
    <p>當前計數：{{ currentCount }}</p>
    <button @click="incrementCount">增加計數</button>
  </div>
</template>

<script>
export default {
  props: {
    initialCount: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      currentCount: this.initialCount
    };
  },
  emits: ['update-count'],
  methods: {
    incrementCount() {
      this.currentCount++;
      this.$emit('update-count', this.currentCount);
    }
  }
};
</script>

在這個例子中，父組件通過 props 向子組件傳遞一個初始計數值 initialCount，而子組件則在用戶點擊按鈕時增加計數，並通過 emits 發送 update-count 事件通知父組件更新計數。

組件通信

• 保持數據的單向流動：數據應該從父組件流向子組件，而子組件則通過事件來告知父組件變更。
• 避免過度依賴 props 和 emits：當應用變得複雜時，可以考慮使用 Vuex 等狀態管理工具來實現全局狀態的管理，減少組件之間的直接通信。
• 合理設計 props 和事件：確保 props 和 emits 的名稱具備描述性，能夠清晰地表達其用途。

結論

在 Vue 3 中，props 和 emits 提供了一種高效且靈活的方式來實現父子組件間的數據和事件通信。通過合理使用這兩者，我們可以構建出可維護性和可擴展性更高的應用程式。