Contents
- Custom events
- Native events
Having trouble getting help?
Contact Support
Contact Support
Event Binding
25 Apr 20251 minute to read
Syncfusion® Vue UI components support Binding of both Custom and Native Events. For more information, refer official Vue Documentation
Custom events
Custom events are the Component
specific events provided by Syncfusion® Vue components supported through v-on
directive. The Syntax for Binding Custom Event is v-on:event-name="function"
.
Refer the below code snippet for Binding of Custom Events.
// Custom Event Binding
<template>
<div id="calendar">
<ejs-calendar @created="display" />
</div>
</template>
<script setup>
import { CalendarComponent as EjsCalendar } from '@syncfusion/ej2-vue-calendars';
const display = () => {
alert('Calendar Created');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
#calendar {
max-width: 250px;
margin: 0 auto;
}
</style>
Native events
Native events are the DOM events of Syncfusion® Vue component’s root element. .native
modifier for v-on
directive is used for binding these events. The Syntax for Binding Native Event is v-on:event-name.native="function"
.
Refer the below code snippet for Binding Native Events.
//Native Event Binding
<template>
<div id="button">
<ejs-button :content="name" @click="clicked"></ejs-button>
</div>
</template>
<script setup>
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
const name = "Button";
const clicked = () => {
alert('Button Clicked');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
</style>