Vue2.7+Vite3.0中Setup语法糖JSX事件绑定失效如何解决？

1. 修复事件绑定的即时执行问题 #

你当前代码里的onClick={buttonDetail(row)}是立即执行函数，页面加载时就会触发buttonDetail，点击按钮时反而没有绑定事件。正确的写法是传递一个函数引用，点击时再调用：

render: (row) => {
  return (
    <span>
      <el-button type="text" onClick={() => buttonDetail(row)}>
        查看详情
      </el-button>
    </span>
  );
},

2. 确保自定义表格组件的JSX渲染上下文正确 #

Vue2.7的<script setup>中，JSX的渲染默认不会自动绑定组件的上下文。如果你的base-table组件是通过遍历tableConfig，用h函数或JSX渲染列内容，需要确保渲染时传入当前组件的上下文：

自定义base-table组件中的处理示例 #

在base-table的渲染逻辑中，当调用配置项的render方法时，需要传递组件的上下文（可以通过getCurrentInstance()获取）：

// base-table 组件的 setup 中
import { getCurrentInstance, h } from 'vue'

const instance = getCurrentInstance()

// 遍历 tableConfig 渲染列时
columns.map(col => {
  if (col.render) {
    // 调用 render 时传入上下文，确保事件能正确绑定
    return h('td', null, col.render(row, instance.proxy))
  }
})

3. 关于$listeners的说明 #

Vue2.7已经将$listeners合并到$attrs中，不再单独暴露。如果你需要在自定义组件中处理父组件传递的事件，可以通过useAttrs()获取：

import { useAttrs } from 'vue'

const attrs = useAttrs()
// attrs 中包含了原 $listeners 的所有事件

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