vue.js - vue自定义事件的问题

问题描述

问 题

按照官网的demo写的自定义组件未生效，不知道问题出在哪里？
目前点击这个class="color-group-div"的div控制台只能打印出1，而vue实例里面的console.log(2)却没出来

Vue.component('color-group-component', {
        props: ['items'],
        template:   '<div class="color-group-div" v-on:click="triggerCustomEvent">' +
                        '<div v-for="todo in items" class="color-div margin-right" :style="{\'background-color\':todo}"></div>' +
                    '</div>',
        methods: {
            triggerCustomEvent: function () {
                console.log(1);
                this.$emit('customEvent');
            }
        }
    });
    
    var vue = new Vue({
        el: '#vue',
        data: {
            showSelect: false,
            colorArr: {
                '0': ['#FAE600', '#00C039', '#0482DC', '#FF2637', '#FF7701'],
                '1': ['#00CEB2', '#E0E5AD', '#E18169', '#79B786', '#79D6C9'],
                '2': ['#4BBC63', '#59C9EF', '#FF855E', '#69D6C1', '#FFE342'],
                '3': ['#3195D3', '#31E1EA', '#F47398', '#27B3C3', '#67C9F4']
            },
            chartOption: barOption
        },
        methods: {
            openOrClose: function () {
                console.log(2);
                return this.showSelect = !this.showSelect;
            },
            chooseColor: function (s) {
                this.chartOption.seriesColor = this.colorArr[s];
                console.log(this.chartOption.seriesColor);
            }
        }   
   });

<color-group-component
                        :items="chartOption.seriesColor"
                        v-on:customEvent="openOrClose">
                </color-group-component>

解决方案

命名问题，因为在dom操作里，html是不区分大小写的所以将customEvent改成custom-event就可以打印出1、2了

这篇关于vue.js - vue自定义事件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！