Require emit to be compulsory in Vue when using the composition API

Question

Require emit to be compulsory in Vue when using the composition API

After creating a Vue SFC component, I want to make sure that the event handleClose is defined. Here is the current sample code:

// Component.vue
const emit = defineEmits<{
  (e: "handleClose"): void;
}>();

type Props = { isOpen: boolean };
defineProps<Props>();

When trying to use <Component />, an error occurs due to the missing prop isOpen, but there is no complaint about the absence of @handle-close.

I am looking for a way to enforce this check and display a warning if @handle-close is not defined.

javascript vue.js vue-composition-api

Answer 1

Answer №1

When the @foo event listener is compiled as a onFoo prop on the vnode, it can be verified within the internal component instance like this:

function validateEmits(...eventNames) {
  let props;

  if (import.meta.env.DEV && (props = getCurrentInstance()?.vnode.props)) {
    for (const name of eventNames) {
      const propName = 'on' + toPascalCase(name);
      if (typeof props[propName] !== 'function')
        console.warn(name + ' event listener is not present');
    }
  }

  return eventNames;
}

You can use it in the following way:

const emits = defineEmits(['foo', bar']);
validateEmits('foo');

Answer 2

When the @foo event listener is compiled as a onFoo prop on the vnode, it can be verified within the internal component instance like this:

function validateEmits(...eventNames) {
  let props;

  if (import.meta.env.DEV && (props = getCurrentInstance()?.vnode.props)) {
    for (const name of eventNames) {
      const propName = 'on' + toPascalCase(name);
      if (typeof props[propName] !== 'function')
        console.warn(name + ' event listener is not present');
    }
  }

  return eventNames;
}

You can use it in the following way:

const emits = defineEmits(['foo', bar']);
validateEmits('foo');

Require emit to be compulsory in Vue when using the composition API

Answer №1

Similar questions

simulated xhr server along with the locales in polymer appLocalizeBehavior

Having trouble implementing the FCKeditor in a Zend form

Navigating through asynchronous transactions in Node.js: A Guide

methods for dynamically assigning values to keys while iterating over an object

Ways to verify the identity of a user using an external authentication service

Issue with Angular4 select in dropdown not able to trigger onChange event

What is the reason behind obtaining a distinct outcome when logging the properties of an object compared to logging the object itself and checking its properties?

Generating unique ObjectIDs for each object is crucial before saving documents in Mongoose

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

How to choose the nth item from various lists using JQUERY

What is the best way to retrieve an object based on a custom key type in TypeScript when using a

leveraging telerik ui in asp.net mvc with vue.js

Ways to determine if a browser is currently loading a fresh webpage

Using Wordpress with Gravity Forms Ajax and Swup JS for dynamic form submissions

React blogging site's administrative dashboard

The $geoNear operator must be the initial stage in a pipeline to be valid

I am receiving an undefined value when using document.getElementsByClassName

JavaScript file does not execute onload function

Circle overlapping another circle in an image

What is the best way to thoroughly uninstall Ionic and Cordova from an Ubuntu system?