如何在HTML onclick事件中调用JS模块config返回的abc.abc1函数

你当前导出的是ES模块，原生HTML的onclick事件只能访问全局作用域下的变量，所以需要先把目标函数挂载到全局，具体步骤如下：

1. 先修正abc1.js的语法错误 #

原代码里多处缺逗号、注释闭合错误，修正后代码：

// file: abc1.js
export default {
    props: { /*some lines*/ },
    data() {
        return {
            field1: 'value1',
            field2: 'value2'
        }
    },
    computed: { /*some lines*/ },
    config() {
        /* some lines */
        return {
            'abc.abc1' : function(var1) {
                // 你的业务逻辑
                console.log('abc.abc1调用成功，传入参数：', var1)
            },
            'def.def1' : function(var2) {
                // 你的业务逻辑
            }
        }
    }
}

2. 将配置函数挂载到全局作用域 #

ES模块默认是封闭作用域，外部无法直接访问导出内容，你可以直接在HTML里用模块标签处理挂载：

<html>
    <body>
        <!-- 导入模块并挂载到全局window -->
        <script type="module">
            import abc1Module from './abc1.js'
            // 执行config方法拿到所有配置函数，挂载到全局
            window.globalConfig = abc1Module.config()
        </script>

        <!-- 直接在onclick里通过方括号语法访问带点的属性名 -->
        <a href='#' onclick="globalConfig['abc.abc1']('你要传入的参数')">点击调用abc.abc1</a>
    </body>
</html>

注意事项 #

• 引入ES模块的script标签必须加type="module"属性，否则会报错
• 因为abc.abc1是带点的字符串属性名，不能用globalConfig.abc.abc1的点语法访问，必须用globalConfig["abc.abc1"]的方括号语法
• 如果你的项目是Vue/React等框架项目，不推荐用原生onclick，直接在组件内部导入abc1.js调用即可，不需要挂载到全局

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