Vue 的傳值方式（即組件之間的數據通信方式）根據組件關系不同（父子、兄弟、跨層級）有所區別。下面是常見的傳值方式，按使用場景來分類：

---

一、父子組件傳值

1. props（父 -> 子）

父組件通過 props 向子組件傳遞數據。

<!-- 父組件 -->
<Child :msg="parentMsg" /><!-- 子組件 -->
props: ['msg']

2. $emit（子 -> 父）

子組件通過 $emit 觸發自定義事件，向父組件傳遞數據。

<!-- 子組件 -->
this.$emit('updateData', newValue)<!-- 父組件 -->
<Child @updateData="handleUpdate" />

---

二、兄弟組件傳值

兄弟組件沒有直接的父子關系，需通過事件總線或狀態管理來中轉：

3. 事件總線（Vue 2 常用）

創建一個空的 Vue 實例作為事件總線。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()// 組件A
EventBus.$emit('sendData', data)// 組件B
EventBus.$on('sendData', (data) => { /* 接收數據 */ })

Vue 3 中不推薦使用事件總線，可以考慮 mitt 或其他方式。

4. 狀態管理（Vuex 或 Pinia）

使用狀態管理工具集中管理數據，適合大中型項目。

// 示例：Pinia
const store = useMainStore()
store.data = 'xxx'

---

三、跨層級傳值

5. provide / inject

祖先組件使用 provide，后代組件用 inject 接收。適合深層嵌套組件傳值。

// 祖先組件
provide('theme', 'dark')// 后代組件
inject('theme') // 得到 'dark'

---

四、非組件通信

6. URL 參數 / 路由參數

通過 vue-router 的 query 或 params 傳遞數據。

// query 傳值
this.$router.push({ path: '/page', query: { id: 123 } })// 接收
this.$route.query.id// params 傳值（需配置動態路由）
this.$router.push({ name: 'page', params: { id: 123 } })

---

五、Ref 引用方式（Vue 3 特性）

7. ref + expose（父調用子）

子組件通過 defineExpose 暴露方法或數據，供父組件訪問。

// 子組件
defineExpose({ childMethod })// 父組件
const childRef = ref()
childRef.value.childMethod()