vue使用$emit时，父组件无法监听到子组件的事件

来源：互联网发布：太原知豆d1补贴后价格编辑：程序博客网时间：2024/06/16 06:40

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

<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>

阅读全文

1 0