Menu
I have two components, one contains another.
And when I trigger event from child I can't receive it in parent.
Child component
this.$emit('myCustomEvent', this.data);
Parent component
<parent-component v-on:myCustomEvent="doSomething"></parent-component>
But, when I changed event name to my-custom-event in both places it works.
Vue somehow transform event names? Or what can be a problem? I read docs about component naming convention but there nothing related to event naming
861
$emit to emit a custom event. Let's take a look at an example where we have MyTextInput. vue that contains a label and a text input. Whenever the text changes, we want to emit an event with the uppercased value of our input. Instead of calling $emit from our template, we can call a component method instead.
Using the $listeners property, you can forward all event listeners on the component to a specific child element with v-on="$listeners" . For elements like <input> , that you also want to work with v-model , it's often useful to create a new computed property for listeners, like inputListeners below: Vue.
Vue events don't bubble the component tree on their own. However when writing wrapper components this can be the desired behaviour. This code registers a global bubble directive which allows to re-emit all given events: Let's say we want to bubble events start , accelerate and brake of our component Car .
We can emit an event from the parent component to the child with the $emit method. However, there's no obvious way to emit an event from parent to child. However, we can still do this. We can create a new Vue instance create an event bus and then pass the Vue instance to the child to listen to it.
It is recommended to always use kebab-case for the naming of custom events. Lower case events, all smashed together, as recommended by @KoriJohnRoys would also work but are harder to read. It is not recommended to use camelCase for event naming.
The official documentation of Vue.JS states the following under the topic of Event Names:
Event Names
Unlike components and props, event names don’t provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:
this.$emit('myEvent')Listening to the kebab-cased version will have no effect:
<my-component v-on:my-event="doSomething"></my-component>Unlike components and props, event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.
For these reasons, we recommend you always use kebab-case for event names.
164
In addition to @ssc-hrep3's point on kebab-case
The docs for .sync recommend using the pattern update:myPropName
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
