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

[chenliangngng]

本人之前由于长期写 react ，更倾向于 props 模式也就是直接把 onChange 作为参数，但平时还是老老实实遇到事件函数就用 emit 传递

最近 ai 告诉我 props 不是最佳实践，emit 是最佳实践，可我用 cursor 给我生成的代码清一色都是 props 模式，给我整不会了

其实我感觉用 Vue3 tsx 的话，什么 v-model 和 emit 这些都没必要了，和 react 一样 props 到底就好了

[FakerLeung]

emit

[tanranran]

vue2 vue3 都是 emit

[zzh2036]

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

[paopjian]

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

[chairuosen]

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

[jeepc]

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

[wangtian2020]

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

[charlie21]

传递事件用 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 () { ... }
})

```

[Zzzz77]

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

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

[arron2022]

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

[tog]

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

[wu67]

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

[Melting]

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

[abc1310054026]

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

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

[gouflv]

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

[chesha1]

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

[leokun]

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