Events names

[pablohpsilva]

Events names

[pablohpsilva]

Using event bus is not the point here (but, according to vuex documentation, using a event bus should be used only on small applications, due to the complexity it could bring).

About the events itself, I agree:

• Events are scoped to the component ( like @miljan-aleksic said);
• Events should be written in any way the developer desires ( like @kartsims said);
• Events named using kebab case pleases me and most dev's I know;
• Bus event is not the issue here, so I don't see even why mention it (like @kartsims and @Elfayer said).

So this article from Google pretty much summarizes what this style guide will be. Did I get everything right?

[kartsims]

I don't believe saying "all caps events are specific to my app" are a good way to answer the question "what is the right way to name components' events ?"

As @miljan-aleksic said, you can name your events whatever you want since it is only available in the component that listen to the event.

I agree with the kebab-case policy.

[kartsims]

About the global bus event pattern, it works the same, if the bus doesn't listen to a specific event, no collision should happen...

I haven't ever used one either as I don't believe it's good practice but I would be curious to see an example too.

[miljan-aleksic]

Yes, just don't forget the kebab case choice is not only beacuse pleases the most but also because assures the dom templates compatibility.

[pablohpsilva]

Hello again @miljan-aleksic :D

About that... I usually use all uppercase with underscore as spaces.

Why? Because I'm 100% sure nobody else does that. I mean, I can clearly separate a third party component event from the one I wrote.

Here. You can clearly see the event I wrote.

But, I mean... My idea is too personal. So, before we write this style guide, what do you think about the way I create my components events?

[pablohpsilva]

Good morning @miljan-aleksic ! :D

I would like to have some people helping write this style ( @aristidesfl @kartsims @DannyFeliz @crowchirp )

I have some considerations:

1. Native events are lower case;
2. A bunch of third party components are shipped using camel or kebab case;
3. Personally I think all components strict to my application should have a unique way to emit events (like I mentioned on previous comments, all upper case with underscore as spaces);

Google has a good web component guide and I think we could take some of their idea and put it right here.

[miljan-aleksic]

I thought I answered this one... Sorry.

As components events are scoped to the component it is safe to name them without any further consideration but to work on both dom and string templates. I would keep it simple and leave any further styling to the App requirements.

[Elfayer]

I agree with @miljan-aleksic, events should be kebab case. Although it might be a good idea to find a nice way to avoid collisions with a global bus event pattern.

[miljan-aleksic]

Seems I'm missing the picture, probably because never used a bus event before. @Elfayer, can you expose an example where that could happen?

[Elfayer]

This is what it looks like: https://jsfiddle.net/6aes0mmL/

HTML

<template id="comp">
  <div id="comp">
    <button @click="bus.$emit('my-event', 'bus')">Emit from bus</button>
    <button @click="$emit('my-event', 'comp')">Emit from component</button>
  </div>
</template>

<div id="app">
  <comp @my-event="addEvent"></comp>
  <div>{{ events }}</div>
</div>

JS

// Bus event
var bus = new Vue();

// comp Component
var comp = {
    template: '#comp',
  data() {
    return {
      bus,
    };
  },
};

// Root View
new Vue({
    el: '#app',
  data: {
    events: [],
  },
  methods: {
    addEvent(v) {
      this.events.push(v);
    },
  },
  components: {
    comp,
  },
  created() {
    bus.$on('my-event', this.addEvent);
  },
});

I think it's a bad practice too, maybe it's best not to mention it.
I believe it was mentioned by Evan You for people willing to migrate from Vue1 to Vue2 and having a mess of events.

[kartsims]

OK I see the point but still, it is the developer's responsibility to know how to handle events depending on where it has been listened on, isn't it ?

bus.$on('my-event', ... could be handled differently from <comp @my-event="...

Like I said, I see the point, but when you listen to mouseenter event on a DOM element you should pass on the element to the event handler for an appropriate response.

Edit : I may be missing something because I don't think this is an issue at all. So perhaps like you said it is best not to mention it...

[pablohpsilva]

Moved this issue to a PR soon.