When using a named v-model like this:

<my-component v-model:visible="visibleBoolean" />

We use a special emit on the child component that looks like this:

<button v-if="visible" @click="$emit('update:visible', false)">

But that got me thinking about how I name my other events not tied to a v-model.

Should they also have a keyword like update: or something similar preceeding them?

I know it's not required for it to work, but I'm trying to understand defacto naming conventions.

For example, should emit('my-custom-event') have any preceeding keyword in the name?

CodePudding user response：

v-model requires the updating event name to be update:[PropName]. To avoid any potential conflicts, you should not use that update: prefix for your custom events that have no relation to v-models. It's okay to use a different prefix if you want one.

Otherwise, the only naming convention Vue recommends is kebab-case for event names used in DOM templates.