vue中$emit不能触发监听事件的原因

最新推荐文章于 2024-06-21 08:47:39 发布

原创最新推荐文章于 2024-06-21 08:47:39 发布 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #前端

收录于

总结类专栏收录该内容

6 篇文章

订阅专栏

本文探讨了Vue.js中子组件向父组件传递事件的机制，强调了事件名必须遵循小写规则，避免使用驼峰命名，以确保父组件能正确监听到子组件发射的事件。

这里写自定义目录标题

vue使用 $e m i t 时，父组件无法监听到子组件的事件的原因是$ emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

    <div id="counter-event-example">
    <p>{{ total }}</p>
  <button-counter v-on:ee="incrementTotal"></button-counter>
  <button-counter v-on:eEvent="incrementTotal"></button-counter>
  <child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/getOptions.do"></child>
 </div>
 <script>
  Vue.component('button-counter', {
   template: '<button v-on:click="increment">{{ counter }}</button>',
   data: function () {
    return {
     counter: 0
    }
   },
   methods: {
    increment: function () {
     this.counter += 1
     this.$emit('ee', this.counter);//有效
     this.$emit('eEvent', this.counter);//无效，不能使用大写的驼峰规则命名
    }
   },
  })
  new Vue({
   el: '#counter-event-example',
   data: {
    total: '点击下面的按钮'
   },
   methods: {
    incrementTotal: function (b) {
     this.total = b;
    }
   }
  })
 </script>