最佳實踐建議
- 優先使用 props：適合父子組件直接通信，數據流向清晰
- 復雜場景用 eventBus：跨組件通信推薦使用 mitt 庫
- 避免過度使用 $parent：會導致組件耦合度高，難以維護
- provide/inject 適用于跨層級：如主題配置、全局狀態等
- 大型項目用 Pinia 或 Vuex：管理全局狀態，適合復雜應用
根據你的業務場景選擇合適的方式，保持組件間低耦合高內聚，提升代碼可維護性。
下面使用第一種方式傳遞
實戰：子組件獲取父組件訂單信息
以你的發貨彈窗組件為例，獲取父組件的訂單ID：
父組件傳遞訂單ID
<template><view class="order-detail"><button @click="showDeliveryPopup">顯示發貨彈窗</button><DeliveryPopup :orderId="order.id"@delivery-success="handleDelivery"/></view>
</template><script>
import DeliveryPopup from '@/components/DeliveryPopup.vue';export default {components: { DeliveryPopup },data() {return {order: {id: 20230607,amount: 299,status: '待發貨'}}},methods: {showDeliveryPopup() {// 顯示彈窗},handleDelivery(res) {// 處理發貨成功邏輯uni.showToast({title: '發貨成功',icon: 'success'});}}
}
</script>子組件接收并使用訂單ID
<template><view class="delivery-popup"><!-- 其他代碼 --><text>訂單ID: {{ orderId }}</text><button @click="handleSend">確認發貨</button></view>
</template><script setup>
import { defineProps, defineEmits } from 'vue';// 定義 props 接收父組件訂單ID
const props = defineProps({orderId: {type: Number,required: true}
});const emits = defineEmits(['delivery-success']);const handleSend = () => {// 使用父組件傳遞的 orderId 構建發貨參數const params = {orderId: props.orderId,expressCompanyId: 1,logisticsNo: 'SF123456789'};// 調用發貨接口// ...// 通知父組件發貨成功emits('delivery-success', {orderId: props.orderId,status: '已發貨',// 其他結果數據});
};
</script>
