Vue3 tsx 应该用 props 还是 emit 传递事件？

emit

vue2 vue3 都是 emit

vue3 文档，只是推荐使用。
“尽管事件声明是可选的，我们还是推荐你完整地声明所有要触发的事件，以此在代码中作为文档记录组件的用法。同时，事件声明能让 Vue 更好地将事件和透传 attribute 作出区分，从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况。”

为的不是单向数据流么, 一切变动都有缘由

props 优点是 async 一下可以知道异步执行结束再继续，缺点是需要判断回调存在

直接用 vue3.4 的双向绑定特性吧

父调用子 子 expose 一个方法，比如 openDialog 父直接 ref 用子引用调用方法，一次性传参不要用 props ！
子传父 emit

传递事件用 emit

如果想传递 event handler, 用 props

```
// 父组件
<group-form :on-submit="saveGroup" />

function saveGroup (groupDetails: { name: string | null, users: Record<string, string[]> }, createNew: boolean = false) {
}
```
```
// 子组件
import { type PropType } from 'vue'

export default defineComponent({
props: {
onSubmit: {
type: Function as PropType<(groupDetails: { name: string | null, users: Record<string, string[]> }, createNew: boolean) => void>,
required: true
},
},
setup () { ... }
})

```

看中代码质量，追求代码可维护性和可读性的话，更应该用 emit

但是话又说回来，如果是大面积直接用 AI 生成代码了，也就无所谓用什么/怎么用了，最后结局都是 AI 维护，能跑就行。

同 react 一开始 vue 的时候也有这种困惑，后面直接一路 this.$refs.childRef.xxx 爽的飞起

1 、props (父传子, 一般是变量)
2 、emit (子传父， 事件)
3 、defineModel (在组件上绑定 v-model, 这个很好用)

讲真, 个人认为子组件的数据, 子组件自己逻辑处理然后 emit 传递出来才是正解, 父组件传个方法进去简直就像邪道....
实在不行, 像楼上那种拿 ref 调子组件方法也不是不能用

我问 AI 也是说 props 毕竟符合单项数据流，而且可以 props 类型检测也比较清晰，不过 emit 是 vue 双向数据的特色，习惯了感觉也好用，传 function 来获取子组件的值总感觉怪怪的

这我之前写组件的时候碰到过，其实 emit 和 props 是有区别的。

1. emit 更类似 DOM 的 dispatchEvent 机制，只管派发事件。如果你关心事件的返回值 emit 是无法获取返回值的。
2. props 传入的是函数对象，触发事件实际就是调用函数，这种情况下可以拿到函数返回值。

emit 可以在 devtool 看到日志，props 不行。

props 父传子，emit 子传父，vue 相对 react 来说，组件通信方式太多了，不像 react 很强调单项数据流，我感觉都行

用 emit ，理由是 emit.update:state + props.state 支持 v-model ，并且 defineModel 宏也是这样做的(官方已经教你了)
props 中传函数只会传一些钩子函数，例如数据过滤，数据排序的函数