Events as Props: more details added

[leoelz]

I wrote different cases In the Playground to understand the Events as Props

Description of Problem

1- It was missing a dot and new line
2- as the former will pass only handle the property based listener sentence was not clear for me
3- (either @event or :on-event) is using :kebab-case instead of :camelCase, and it could lend into an issue when using $emit(explained in the new warning sentences).

Proposed Solution

1- Dot and new line added
2- I've tried to rewrite the sentence, maybe you can suggest a better one.
3- :on-event replaced with :onEvent

Additional Information

I've found more warings to add

[netlify]

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	93dbc76
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/65720597b9755c000891476f
😎 Deploy Preview	https://deploy-preview-2594--vuejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[leoelz]

I've reported the issue vuejs/core#9812 and the PR vuejs/core#9813

[pikax]

The intention of that part of the docs it to show you can still pass props as events, because that's been used in more advanced usages and not not a clear behaviour for some users, I've added the documentation of it as an FYI.

I recommend do not dwell to much on it because is not a feature that regular users should be using, the behaviour does not have a spec and might change in the future, while some of the libraries that rely on that behaviour have resources to make changes if the spec is needed, the same is not expected from users.

@NataliaTepluhina if that section will cause confusion on the community, might be better to remove it completely to prevent confusion.

---

Edit: The main goal for adding that to the docs is to explain possibly v-bind bugs or usages:

<script setup>
import Comp from './Comp.vue';

const obj = {
  onClick: () => {
    // this can be called as an `$emit('click')` 
    console.log('clicked me')
  }
}
</script>

<template>
  <Comp v-bind="obj" />
</template>

[leoelz]

IMHO, if is not in the specs, as is not recommended and because some caveats it might be better to avoid Event as Props content.
1- If props.onSomeEvent emitter is defined and no handler is set, it will throw an error.
2- If hyphenated :on-some-event handler is defined, it won’t be called if emit('some-event') emitter is defined.

Maybe a “Vue Hacks” section can be added to the guide for this kind of features that are not in specification.

[NataliaTepluhina]

I removed the whole section for now. The idea of Vue hacks/workarounds is really nice, we should look into it 👍🏻