Vue2调用$emit触发v-on handler报错TypeError: Object(...) is not a function

根因排查 #

• 父组件自定义事件绑定语法错误：父组件中写@clicked="test()"时，加括号相当于触发事件时直接执行无参的test方法，子组件emit传递的sql字符串完全不会被接收，部分Vue版本下该写法会触发上下文类型错误。
• 未定义方法调用风险：test方法内调用的logInConsole如果没有全局注册、也没有在当前组件methods中定义，会直接抛出「不是函数」的报错。
• 导入方法导出异常：从./packs/my_js_file.js导入的loadMap如果不是用ESModule规范导出，或者导出方式被修改，导入后拿到的会是一个对象而非函数，调用时就会触发对应报错，这也是功能突然失效、旧代码也报错的最常见原因。
• 子组件冗余代码：giveToParent方法中连续两次调用$emit属于无效冗余代码，虽不会直接触发报错，但建议清理。

修复后代码示例 #

子组件代码 #

<template>
  <div>
    <button @click="giveToParent">search</button>
  </div>
</template>

<script>
export default {
// 省略其他原有逻辑
  methods: {
    giveToParent() {
      const sql = "select * from xxxxx where min_Price=20";
      this.$emit("clicked", sql);
    }
  }
}
</script>

父组件代码 #

<template>
  <Menu_Filter @clicked="test"></Menu_Filter>
</template>

<script>
import Menu_Filter from "./components/Menu_Filter";
import { loadMap } from "./packs/my_js_file.js";

export default {
// 省略其他原有逻辑
  components: {
    Menu_Filter // 漏注册组件也可能触发同类报错，补全注册逻辑
  },
  methods: {
    test(value) {
      console.log(value); // 替换未定义的logInConsole方法
      loadMap(value);
    }
  }
};
</script>

额外排查项 #

如果以上修改后仍报错，执行以下操作：

1. 打开my_js_file.js确认loadMap的导出方式，如果是module.exports = { loadMap }的CommonJS导出，要么改成export function loadMap(){}的ESModule导出，要么把导入语句改为import myJs from "./packs/my_js_file.js"，调用时用myJs.loadMap(value)
2. 清除node_modules后重新安装依赖，排查依赖包自动升级导致的兼容性问题。

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