嘿，从React转Vue遇到这种习惯差异太正常了！针对你说的「让按钮子组件不耦合点击逻辑，交由父组件定义」的场景，Vue里两种方式都能实现，但官方更推荐使用子组件emit事件的方式，这也是Vue生态里的最佳实践，我来给你拆解下原因和具体实现：

1. 官方推荐：子组件emit事件 #

这种方式完全贴合Vue的单向数据流设计，子组件只负责触发事件，不关心具体逻辑，父组件监听事件并处理业务，职责划分非常清晰。

子组件实现（Button.vue） #

<template>
  <button @click="handleClick">
    <slot>默认按钮文本</slot>
  </button>
</template>

<script setup>
// 用defineEmits声明对外暴露的事件，更规范且能获得TS类型提示
const emit = defineEmits(['btn-click'])

const handleClick = (event) => {
  // 触发事件，还可以传递参数给父组件（比如原生点击事件对象）
  emit('btn-click', event)
}
</script>

父组件使用（Parent.vue） #

<template>
  <Button @btn-click="handleBtnClick">自定义按钮文本</Button>
</template>

<script setup>
import Button from './Button.vue'

const handleBtnClick = (event) => {
  // 这里写父组件的专属逻辑，比如提交表单、打开弹窗等
  console.log('按钮被点击了，执行父组件逻辑:', event)
}
</script>

2. 可行但非首选：传递函数props #

你习惯的React式写法在Vue里也能跑通，但不是官方推荐的最优解，因为它不太符合Vue的组件通信范式：

子组件实现（Button.vue） #

<template>
  <button @click="onClick">
    <slot>默认按钮文本</slot>
  </button>
</template>

<script setup>
// 定义接收的函数props
const props = defineProps({
  onClick: {
    type: Function,
    required: true
  }
})
</script>

父组件使用（Parent.vue） #

<template>
  <Button :on-click="handleBtnClick">自定义按钮文本</Button>
</template>

<script setup>
import Button from './Button.vue'

const handleBtnClick = () => {
  console.log('执行父组件逻辑')
}
</script>

为什么emit是最佳实践？ #

• 语义更清晰：emit的事件名是子组件对外的「交互接口」，其他开发者一看就知道这个组件能触发什么动作；而传递函数props更像是直接注入逻辑，可读性稍弱。
• 贴合Vue设计哲学：Vue遵循「props down, events up」的单向数据流，数据从父到子通过props，事件从子到父通过emit，这种模式让组件间的通信流向非常清晰，调试起来更简单。
• 工具和生态支持更好：Vue DevTools会清晰记录组件emit的事件，方便你追踪交互流程；而且Vue的自定义事件还支持.once、.prevent等修饰符，这些语法糖是传递函数props没法享受到的。
• 避免潜在问题：如果传递的函数依赖父组件的响应式上下文，虽然也能工作，但emit的方式更符合Vue的响应式机制，不容易出现一些难以排查的奇怪bug。

当然，如果你的团队更习惯React的写法，或者某些特定场景下传递函数props更方便，Vue也完全支持这种方式——只是从Vue的官方设计和生态适配来看，emit事件是更推荐的最佳实践。

内容的提问来源于stack exchange，提问作者Andrew Kim