父子组件通信

父传子：props

<!-- 父组件 -->
<Child :user-info="user" :title="pageTitle" />

<!-- 子组件 -->
<script setup>
const props = defineProps({  
  userInfo: Object,  
  title: String
})
</script>

子传父：$emit

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['update', 'delete'])
const handleClick = () => {
  emit('update', { id: 1 })
}
</script>

<!-- 父组件监听 -->
<Child @update="handleUpdate" />

兄弟组件通信

事件总线，利用uni-app提供的uni.$emit和uni.$on，创建一个全局的事件中心

// 组件A
uni.$emit('cart-updated', { count: 5 })

// 组件B（通常在onLoad中监听）
onLoad() {  
  uni.$on('cart-updated', (data) => {    
    this.cartCount = data.count  
  })
}

// 组件卸载时必须取消监听，否则内存泄漏
onUnload() {  
  uni.$off('cart-updated')
}

跨平台注意：uni.$on/$off/$emit在H5、小程序、App都可用，但小程序中页面卸载后监听依然存在，所以一定要在onUnload中取消

跨级组件通信

如果父组件和孙组件（甚至更深）需要通信，一层层传props会很繁琐。这时可以用Vue3的provide和inject

// 祖先组件
import { provide, ref } from 'vue'
const user = ref({ name: '张三' })
provide('user', user)  // 传递响应式对象

// 后代组件
import { inject } from 'vue'
const user = inject('user')