如何执行以字符串形式传递的函数？（Vue.js场景）

你遇到的核心问题是：传递给handleClick的Function是字符串类型（比如"editItem"），而非实际的函数对象，所以调用apply会报错——字符串没有apply方法；eval失效则是因为<script setup>里的函数属于模块局部作用域，eval默认在全局作用域找不到这些函数。

下面给出两种可行的解决方案：

方案一：用函数映射表匹配字符串名称 #

先把所有需要调用的函数存入一个对象，通过字符串名称快速查找对应的函数：

<template>
  <ul>
    <li v-for="MenuItem in MenuItems">
      <button type="button" @click.prevent="handleClick({Function: MenuItem.Function.Name, Params: MenuItem.Function.Params })">
        {{ MenuItem.Label }}
      </button>
    </li>
  </ul>
</template>

<script setup>
const MenuItems = [
  {
    Label: `Edit`,
    Function: {
      Name: `editItem`,
      Params: {
        ItemID: 1
      }
    },
  },
  {
    Label: `Delete`,
    Function: {
      Name: `deleteItem`,
      Params: {
        ItemID: 1
      }
    }
  }
]

// 建立函数名称和函数对象的映射
const functionMap = {
  editItem,
  deleteItem
}

function handleClick({ Function: funcName, Params }) {
  const targetFunc = functionMap[funcName];
  // 先判断函数是否存在，避免报错
  if (typeof targetFunc === 'function') {
    // 按需求传递参数：如果函数需要单个ItemID，就传Params.ItemID；如果需要整个对象，直接传Params
    targetFunc(Params.ItemID);
  }
}

function editItem(itemId){
  console.log(`edit item ${itemId}`);
}

function deleteItem(itemId){
  console.log(`about to delete item ${itemId}`);
}
</script>

方案二：直接在MenuItems中存储函数引用 #

这种方式更直接，不需要字符串匹配，减少出错概率：

<template>
  <ul>
    <li v-for="MenuItem in MenuItems">
      <button type="button" @click.prevent="handleClick(MenuItem.Function)">
        {{ MenuItem.Label }}
      </button>
    </li>
  </ul>
</template>

<script setup>
const MenuItems = [
  {
    Label: `Edit`,
    Function: {
      Func: editItem, // 直接存储函数对象
      Params: {
        ItemID: 1
      }
    },
  },
  {
    Label: `Delete`,
    Function: {
      Func: deleteItem,
      Params: {
        ItemID: 1
      }
    }
  }
]

function handleClick({ Func, Params }) {
  if (typeof Func === 'function') {
    Func(Params.ItemID);
    // 或者 Func(Params)，根据函数参数需求调整
  }
}

function editItem(itemId){
  console.log(`edit item ${itemId}`);
}

function deleteItem(itemId){
  console.log(`about to delete item ${itemId}`);
}
</script>

补充说明 #

• 如果你需要函数接受多个参数，可以把Params改成数组，然后用Func(...Params)展开传递；
• 始终建议先判断目标是否为函数再调用，避免因数据错误导致页面崩溃。

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