解决vue3中抽离出来的js如何调用页面的方法

有时我们会用render渲染表格的columns，里面的按钮如何去调用.vue文件的方法？
思路： 在.vue文件中我们通过参数的方式传给.js文件，然后用变量接收，点击时执行 （注意：.vue文件中setup执行比较早，按钮是点击事件，不会主动执行函数。为防止函数未声名就当做参数传递，必须在最后执行getFn函数，和defineExpose位置一样）

实现如下：

// .vue 文件
import { getFn } from './list.js'

// 如果是const声名的函数，这行代码一定要写在最后，保证函数执行时所有参数已经声名  如果是function viewInfo(){}则写在开头也是没有问题的
getFn({ changeStatusItem, viewInfo, addTabs })

// .js 文件

const changeStatusItemFn = ref(null)
const viewInfoFn = ref(null)
const addTabsFn = ref(null)
export const getFn = ({ changeStatusItem, viewInfo, addTabs }) => {
  changeStatusItemFn.value = changeStatusItem
  viewInfoFn.value = viewInfo
  addTabsFn.value = addTabs
}

// 使用时
  {
    title: '操作',
    dataIndex: 'operating',
    key: 'operating',
    width: 260,
    fixed: 'right',
    customRender: ({ record }) => {
      return h('div', {}, [
        h(
          Button,
          {
            class: 'table-operate-link_error',
            type: 'link',
            onClick() {
              changeStatusItemFn.value(record)
            }
          },
          {
            default: () => (record.status ? '禁用' : '启用')
          }
        ),
        h(
          Button,
          {
            class: 'table-operate-link',
            type: 'link',
            onClick() {
              addTabsFn.value(!record.status ? 'edit' : 'view', record)
            }
          },
          {
            default: () => (record.status ? '查看' : '编辑')
          }
        ),
        h(
          Button,
          {
            class: 'table-operate-link',
            type: 'link',
            disabled: !record.status,
            onClick() {
              viewInfoFn.value(record.id)
            }
          },
          {
            default: () => '事件'
          }
        )
      ])
    }
  }