Vue 组件通信三要素：Props、Emit、Refs

1. Props父 → 子父组件通过自定义属性向子组件传递数据。子组件使用props数组或对象声明接收的属性名父组件在模板中像 HTML 属性一样赋值。vue!-- 父组件 -- Child :msgparentMsg / !-- 子组件 -- script export default { props: [msg] // 或对象形式带类型校验 } /script2. Emit子 → 父子组件通过$emit触发自定义事件并携带参数。父组件使用eventName或v-on:eventName监听触发后执行自身方法并接收子组件传来的参数。vue!-- 子组件 -- button click$emit(update, value)触发/button !-- 父组件 -- Child updatehandleUpdate /这种模式与EventEmitter的事件驱动机制类似属于发布-订阅思想。3. Refs父直接调用子父组件通过ref属性给子组件起名然后通过this.$refs.xxx获取子组件实例从而直接调用子组件的方法或读取其属性并可传递参数。vue!-- 父组件 -- Child refchildRef / button clickcallChildMethod调用/button script export default { methods: { callChildMethod() { this.$refs.childRef.doSomething(param) console.log(this.$refs.childRef.someData) } } } /script补充Vue 3 中的变化组合式 API中使用defineProps和defineEmits声明更类型友好。vuescript setup const props defineProps({ msg: String }) const emit defineEmits([update]) emit(update, newValue) /scriptv-model本质上就是propsemit的语法糖默认modelValue属性和update:modelValue事件。总结方式方向用途Props父 → 子传递数据Emit子 → 父触发事件、传递参数Refs父 → 子直接调用子组件方法/属性打破单向流谨慎使用合理搭配这三种方式即可轻松应对 Vue 中绝大部分组件通信场景。