调用 $emit 时：[Vue 警告]：v-on 处理程序中的错误：“TypeError: Object(...) is not a function”Vue 2答案

【问题标题】：when calling $emit: [Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a function" Vue 2调用 $emit 时：[Vue 警告]：v-on 处理程序中的错误：“TypeError: Object(...) is not a function”Vue 2
【发布时间】：2021-09-30 07:32:22
【问题描述】：

一切都运行得很好，直到突然就不行了。

我有一个带有点击事件的按钮。当我点击它时，它会调用方法 giveToParent() 发出一个字符串：

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

<script>
export default {
...
  methods: {
    giveToParent() {
      var sql = "select * from xxxxx where min_Price=20";

      this.$emit("clicked", sql);


      console.log(this.$emit("clicked", sql));
    },

在父级 (app.vue) 中看起来像这样：

<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 {
...
  },
  methods: {
    test(value) {
      logInConsole(value);
      loadMap(value);
    },
    
  },
};

错误信息如下：如您所见，它说对象不是函数，这是真的，因为 $emit 函数似乎是一个 vue 组件。我可以毫无问题地记录其他内容，所以它必须是 $emit 函数。

奇怪的是，这一切都奏效了，然后突然就不行了。我什至在我的笔记本电脑上有一个旧版本，当我尝试在那里执行它时，它也失败了。

我真的不知道为什么它不再起作用了。

【问题讨论】：

标签： javascript vue.js error-handling vue-component

【解决方案1】：

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

这应该可以解决问题，v-on 不喜欢将其作为没有参数的函数调用。

【讨论】：

不，不幸的是，这并没有解决问题。我仍然遇到同样的错误。
在父级的 v-on 中尝试相同
还是同样的错误。最奇怪的是，它甚至可以使用 giveToParent() 和 test()。
用您上面提供的代码做了一个工作示例：codesandbox.io/s/currying-pond-pb1wg - console.log(this.$emit) 抛出了一些警告，但我认为这只是为了调试吧？
奇怪的是它适用于代码沙盒，但不适用于我的应用程序。我想不出还有什么会引发这个错误的。是的，console.log 只是为了调试。

【解决方案2】：

您可以使用click.native 进行测试吗？我不确定，但我认为你可以用这个技巧解决它

<div id="app">
    <Menu_Filter v-on:click.native="testFunction"></Menu_Filter>
</div>

【讨论】：

不幸的是，我仍然遇到同样的错误，但我以前从未听说过 .native。它是干什么用的？
如果你想在组件的根元素上监听原生事件，你必须使用 .native 修饰符来实现 v-on
你能查到这行吗<button @click.native="giveToParent">search</button>
当我使用.native 时，$emit 函数不会被触发，因为test(value) 方法不会被执行