?Props 和 Events（父子組件通信）

• Props：父組件向子組件傳遞數據使用 props。子組件通過聲明 props 來接收來自父組件的數據。

  <!-- 父組件 -->
  <template><ChildComponent :message="parentMessage" />
  </template><script>
  import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {parentMessage: 'Hello from parent'};}
  };
  </script>

  <!-- 子組件 -->
  <template><div>{{ message }}</div>
  </template><script>
  export default {props: ['message']
  };
  </script>

• Events：子組件向父組件發送消息或數據可以使用 $emit 方法觸發自定義事件。

  <!-- 子組件 -->
  <template><button @click="sendMessage">Send Message</button>
  </template><script>
  export default {methods: {sendMessage() {this.$emit('childEvent', 'Hello from child');}}
  };
  </script>

  <!-- 父組件 -->
  <template><ChildComponent @childEvent="handleChildEvent" />
  </template><script>
  import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },methods: {handleChildEvent(message) {console.log(message);}}
  };
  </script>

ChildComponent.vue，它需要向父組件發送兩個參數：message 和 status。

<template><button @click="sendDataToParent">Send Data to Parent</button>
</template><script>
export default {data() {return {message: 'Hello from Child',status: 'success'};},methods: {sendDataToParent() {// 使用 $emit 觸發自定義事件，并傳遞多個參數this.$emit('dataFromChild', this.message, this.status);}}
};
</script>

在這個例子中，當按鈕被點擊時，會調用 sendDataToChild 方法，該方法使用 $emit 來觸發名為 dataFromChild 的自定義事件，并傳遞了兩個參數：this.message 和 this.status。

父組件代碼

接下來，在父組件中引入 ChildComponent 并監聽 dataFromChild 事件。

<template><div><!-- 監聽來自子組件的自定義事件 --><ChildComponent @dataFromChild="handleDataFromChild" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },methods: {handleDataFromChild(message, status) {console.log('Message:', message); // 輸出: Hello from Childconsole.log('Status:', status);   // 輸出: success// 在這里處理接收到的數據}}
};
</script>

在這個父組件的例子中，@dataFromChild="handleDataFromChild" 表示監聽子組件發出的 dataFromChild 事件，并在事件發生時調用 handleDataFromChild 方法。此方法接收子組件傳遞過來的參數（在這個例子中是 message 和 status），然后可以根據業務需求對這些數據進行處理。

這種方法可以讓你輕松地在子組件和父組件之間傳遞任意數量的參數。只需要確保在 $emit 調用時傳遞正確的參數，并在父組件的方法中正確接收它們即可

父組件在監聽子組件事件的同時，還需要傳遞自己的參數

• 子組件通過?$emit?觸發事件，傳遞自己的數據（如：childData）。
• 父組件監聽該事件，同時還想傳入自己的參數（如：parentId,?category?等）。
• 最終父組件的處理函數需要?同時拿到子組件的數據 + 父組件自己的參數。

---

?方法一：使用內聯箭頭函數（推薦）

這是最清晰、最常用的方式。

<!-- 父組件 ParentComponent.vue -->
<template><div><!-- 使用箭頭函數包裝，同時傳入父組件參數 --><ChildComponent@dataFromChild="(childData) => handleData(childData, parentId, 'user')"/></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {parentId: 1001,};},methods: {handleData(childData, parentId, type) {console.log('來自子組件的數據:', childData);console.log('父組件自己的參數:', parentId, type);// 處理邏輯...}}
};
</script>

? 優點：語義清晰，支持傳任意多個父參數。

---

?方法二：使用包裝函數（命名函數）

如果你不想用內聯箭頭函數，也可以封裝一個中間函數。

<template><ChildComponent @dataFromChild="wrapperHandler" />
</template><script>
export default {data() {return {parentId: 1001,};},methods: {wrapperHandler(childData) {// 在這里調用真正的處理函數，并傳入父組件參數this.handleData(childData, this.parentId, 'admin');},handleData(childData, parentId, role) {console.log(childData, parentId, role);}}
};
</script>

? 優點：邏輯分離，適合復雜邏輯。

---

? 方法三：使用?$event?隱式變量（傳統方式）

Vue 會把 $emit 的第一個參數自動傳給監聽函數，可以用 $event 接收。

<template><ChildComponent @dataFromChild="handleData($event, parentId, 'guest')" />
</template><script>
export default {data() {return {parentId: 1001,};},methods: {handleData(childData, parentId, userType) {console.log(childData, parentId, userType);}}
};
</script>

?? 注意：$event 是子組件 $emit 傳遞的第一個參數。如果有多個參數，$event 只是第一個。如果要傳遞多個,可以把參數包裝成一個對象.

<!-- ChildComponent.vue -->
<template><button @click="sendData">Send Data</button>
</template><script>
export default {methods: {sendData() {this.$emit('dataFromChild', {name: 'Alice',age: 25});}}
};
</script>

---

? 總結

方法	說明	推薦度
內聯箭頭函數?(data) => handler(data, param)	最靈活，推薦	?????
包裝函數	邏輯清晰，適合復雜處理	????☆
$event?+ 參數	傳統寫法，稍顯隱晦	???☆☆

---