Vue.js Vue$emit激发，但不触发父组件方法

我一直在尝试将数据从孩子传递给父母。我不太清楚为什么我现在得到的不起作用。我应该提到发射器被激发，但是父组件中的方法似乎没有被调用

Children.vue：

<div @click="removeCommercials()" class="">
  <u-button icon color="transparent">
    <u-icon icon="switch-on" color="white"/>
  </u-button>
</div>

methods: {
    removeCommercials () {
      this.$emit('test',{message:'HELLOOOO???'})
      console.log("AAA")
    }
  },

方法：{
removeCommercials（）{
这个.$emit（'test'，{message:'hellooooo？？？}）
控制台日志（“AAA”）
}
},

Parent.vue：

<Children class="mt-4" @test="noCommercials"/>

methods: {
    noCommercials(deactivate) {
      console.log("?????")
      this.deactivateCommercials = deactivate.message
      console.log("REMOVEING COMMERCIALS")
      console.log(this.deactivateCommercials)
    },
  },

方法：{
非商业（停用）{
控制台日志（“？？？”）
this.deactivate电子商务=deactivate.message
console.log（“删除商业广告”）
console.log（this.deactivateCommercials）
},
},

从控制台我可以看到文本

AAA

。从vue开发者工具中，我还可以看到发射器被正确的数据触发。但是父组件中的方法

noCommercials

似乎没有触发。控制台中不会打印来自该方法的任何内容

在其他一些帖子中，我看到有人谈论使用

this.$parent.$emit

而不是

this.$emit

，但这对我来说并不管用。我也见过其他人有同样的问题，但那是因为他们使用了错误的子组件

我真的很困惑为什么父组件中根本没有触发

noCommercials

方法。我做错了什么

其他信息：

---

我试着用

$emit

从不同的子组件触发相同的方法，结果成功了。现在我只需要弄清楚为什么这个特定的子组件会给我带来问题。

您使用Vue版本3吗？然后，您必须声明您发出的事件，与早期版本相比，请参见我在版本2.6.12。您是否可以检查此codepen解决方案您的codepen解决方案在codepen中工作，但我不能使用该格式，因为这不是项目的格式。更大的问题是，我试图从不同的子组件发射，而该方法被触发。我认为根本问题出在子组件的某个地方。可能不是，但如果单击事件被移动到子组件，会怎么样？在div元素上看到它似乎很奇怪。