VUE3的compositon风格代码中,如何根据给定的字符串调用字符串的值所相对应的该页面的某个函数
时间: 2024-10-06 09:02:50 浏览: 35
在Vue 3的Composition API中,你可以通过创建一个响应式的映射对象或者使用`ref`配合计算属性来实现这样的功能。假设有一个名为`methodsMap`的对象,其中键是字符串,值是对应的函数:
```javascript
// 定义一个映射对象
const methodsMap = {
'string1': handleFunction1,
'string2': handleFunction2,
// 更多的字符串-函数对...
};
// 使用ref包装函数引用,以便它是响应式的
const functionRef = reactive({});
// 初始化时将函数映射到ref中
function init() {
for (const key in methodsMap) {
if (methodsMap.hasOwnProperty(key)) {
functionRef[key] = methodsMap[key];
}
}
}
// 当前页面组件内的方法
function callMethod(str) {
const func = functionRef[str]; // 根据传入的字符串获取对应函数
if (func) {
func(); // 调用函数
} else {
console.log('Method not found');
}
}
export default {
setup() {
init();
return { callMethod };
},
};
```
在这个例子中,当`callMethod`接收到一个字符串参数,它会从`functionRef`中查找相应的方法并执行。如果找不到,则会输出提示信息。
阅读全文