vue组件通信最基础推荐方式是props向下传数据、自定义事件emit向上通知；props单向只读需声明类型和默认值，子组件通过defineprops接收、不可直接修改；emit需用defineemits声明事件名并手动触发，父组件用@监听或v-model语法糖响应。
Vue 组件间通信最基础、最推荐的方式就是 Props 向下传数据，自定义事件（emit）向上通知。这不是可选项，而是 Vue 响应式设计的默认约定，也是保持组件解耦和可维护的关键。
Props：父组件给子组件“送东西”
Props 是单向的、只读的数据通道。父组件把数据当作属性绑定到子组件标签上，子组件通过 defineProps 明确声明自己要接收什么。
- 必须声明类型和是否必填，比如
{ title: String, count: { type: Number, default: 0 } }，这样能提前发现传错类型的问题 - 子组件不能直接修改 props，否则控制台会报警告；想改数据，应该 emit 事件让父组件去改
- 支持解构使用（如
const { title, count } = props），但要注意解构后会丢失响应性，需配合toRefs或直接用props.title
Emits：子组件向父组件“喊一声”
子组件不直接调用父组件的方法，而是用 defineEmits 声明它能发出哪些事件，再用 emit('event-name', data) 主动触发。父组件用 @event-name 监听并响应。
- 事件名建议用 kebab-case（如
'update-status'）或遵循 Vue 的update:xxx惯例，方便与v-model对齐 - 必须在
defineEmits中显式列出事件名，否则 TypeScript 会报错，运行时也更安全 - 一个常见错误是把父组件方法当 props 传进去然后直接调用——这违反单向数据流，也会导致
xxx is not a function
配合起来才完整：状态 + 变更通知
Props 和 emit 不是割裂的，而是一对搭档：Props 传当前状态，emit 通知状态要变了。比如一个计数器组件：
- 父组件传入
:count="currentCount" - 子组件显示这个值，并在按钮点击时
emit('update-count', currentCount + 1) - 父组件监听
@update-count="currentCount = $event"或用语法糖v-model:count="currentCount"
和原生事件别混淆
@input 是浏览器自带的 DOM 事件，用户一敲键盘就自动触发；@update 是你定义的组件事件，必须由子组件手动 emit 才会触发。一个是“系统自动发”，一个是“你主动喊”。搞清这点，就不会在监听不到事件时瞎调试了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
