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

最新推荐文章于 2024-01-08 14:23:58 发布

xiawj8957

最新推荐文章于 2024-01-08 14:23:58 发布

阅读量2.2k

点赞数 1

分类专栏：总结类文章标签： vue 前端

本文链接：https://blog.csdn.net/xiawj8957/article/details/102627712

版权

总结类专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

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>