vue3 + ts 动态调用方法 ？

Question

<template>
  <div class="app-container">
    <el-button v-for="(item, index) in BUTTON_CONFIG" :key="index" @click="bundleClick(item)">重置</el-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
interface ButtonType { text: string; event: string; params?: any; }
type ButtonKey = 'add' | 'update' | 'delete';
const BUTTON_CONFIG = ref<Record<ButtonKey, ButtonType>>({
  add: {
    text: '修改',
    event: 'click1',
  },
  update: {
    text: '积分修改',
    event: 'click2',
    params: '1',
  },
  delete: {
    text: '成长值修改',
    event: 'click3',
    params: '2',
  },
  // ...很多按钮配置
});
const bundleClick = (btnItem: ButtonType) => {
  // 如何像vue2一样通过this[btnItem.event](btnItem.params) 一样调用，以及如何增加ts类型;
}
const click1 = () => { console.log('click1'); }
const click2 = () => { console.log('click2'); }
const click3 = () => { console.log('click3'); }
</script>

Answer 1

这样？

const eventsMap = {
    click1: (params) => {
        console.log(params);
    },
    ...
};
const bundleClick = (btnItem: ButtonType) => {
  // 如何像vue2一样通过this[btnItem.event](btnItem.params) 一样调用，以及如何增加ts类型;
    eventsMap[btnItem.event](btnItem.params);
}

Answer 2

正好遇到了相同的问题, 说下我的处理方式

1. 将click1, click2之类的方法单独放一个ts文件, 代码如下:

   interface ButtonType {
   id: number
   name: string
   action: string
   type: any
   size: any
   }
   
   export const click1 = (btnObj: ButtonType) => {
   alert(btnObj.name)
   }
   
   export const click2 = (btnObj: ButtonType) => {
   alert(btnObj.name)
   }

2. 在vue代码中引入, 作为一个方法集合

   import * as methods from './demo1'
   
   //然后就可以动态调用
   return methods[btnObj.action](btnObj)