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>