vue 2 @click в дочернем компоненте

Question

У меня есть простой компонент

<template>
    <span @click="clickHandler" :class="className"></span>
</template>
<script>
    export default {
        name: "PlusIconComponent",
        props: {
            gender: {
                type: String,
                required: true
            },
            part: {
                type: String,
                required: true
            },
            opened: {
                type: Boolean,
                required: true
            }
        },
        data(){
            return {}
        },
        methods: {
            clickHandler(){
                console.log('clicked', this.part)
            }
        },
        computed: {
            className(){
                let classes = ['plus-icon', this.part, this.gender]
                if(this.opened){
                    classes.push('opened')
                }
                return classes.join(' ')                
            }
        }        

    }
</script>

Этот компонент находится внутри корневого компонента, что зависит от переменных, показывающих различные компоненты форм (и используйте keep keep для них).В одном из этих компонентов я использую PlusIconComponent обработчик кликов не работает.Когда я перемещаю это событие на один уровень выше, он также не работает.

Это странно, потому что я раньше использовал событие в child.

Этот компонент отображается в цикле

<PlusIconComponent :key="part" v-for="part in parts" :part="part" :gender="gender" :opened="(showPart===part)" />

Я также протестировал @ click.native для компонента, но он не работает.Спасибо за любые подсказки.

Answer 1

Внутри PlusIconComponent, в вашем методе clickHandler вы должны передать какое-то событие родительским пассивным аргументам компонента, например:

clickHandler(){
   this.$emit('clicked', this.part)
}

С другой стороны, в вашем родителе вы должны перехватить это событие с помощью другого обработчика с тем же именем, которое выдает дочерний элемент:

<PlusIconComponent :key="part" v-for="part in parts" :part="part" :gender="gender" :opened="(showPart===part)" @clicked="parentsHandler" />

Наконец, вы можете реализовать то, что вы хотите в родительском:

parentsHandler(part) {
   console.log('parent says: ', part)
}

Именно так дочерний компонент общается со своими родителями. Больше информации здесь