[Vuejs]-How to assign event handlers to custom elements

by

1👍

✅

Use $emit to trigger the event:

Checkbox.vue

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

This allows you to trigger any event you want. The event handler in the parent component will be called whenever it’s emitted. In this case the event handler will receive an argument containing the checkbox’s checked value (boolean).

👤Nathan

4👍

<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)
    },
}
👤Dcynsd

Leave a comment