VueJS |Как назначить обработчики событий для пользовательских элементов

Question

Допустим, у меня есть компонент Vue Checkbox.vue со следующим содержимым.

<template>
    <div class="checkbox">
        <input id="checkbox" type="checkbox">
        <label for="checkbox">Label</label>
    </div>
</template>

Как я могу добавить к нему прослушиватель событий из другого компонента, чтобы вызвать метод для получения его значения, например

//App.vue

<template>
    <checkbox @input="someMethod"></checkbox>
</template>

import Checkbox from 'checkbox';    
export default{
    components: {
        'checkbox': Checkbox
    },

    methods: {
        someMethod(){
            console.log(GET CHECKBOX VALUE);
        }
    }
}

Answer 1

Используйте $emit для запуска события:

Checkbox.vue

<template>
    <div class="checkbox">
        <input id="checkbox" type="checkbox" @change="$emit('change', $event.target.checked)">
        <label for="checkbox">Label</label>
    </div>
</template>

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

Answer 2

<div class="checkbox">
     <input id="checkbox" type="checkbox" @click="onClickMe">
     <label for="checkbox">Label</label> 
</div>

methods: {
    onClickMe() {
        this.$emit('child-say','hello');
    } 
}



App.vue
    <Checkbox v-on:child-say="someMethod" />

methods: {
    someMethod(data) {
        console.log(data)
    },
}