Emit root event

This directive emits custom event on root element, on specified triggers.

Features

• Specify custom JavaScript triggers.
• Pass any data as event argument, by defining directive value

Event name

Event name is defined by directive argument. For example if you want to emit event named: 'span-clicked', after clicking the span, syntax will be as following:

<span v-c-emit-root-event:span-clicked>
  {{user}}
</span>

Event value

By default, event value will be undefined. You can set it, by adding any content to directive value.

Example:

<span v-c-emit-root-event:span-clicked="user">
  {{user}}
</span>

Triggers

By default directive will listen on 'click' event. If you want to change this behavior pass custom triggers as modifiers. When any modifier is passed, default 'click' listener will not be set.

Example:

<span v-c-emit-root-event:span-hover.mouseenter>
  {{user}}
</span>

Listening on root

Emmited events could be listened in every part of the app. Example:

  mounted () {
    this.$root.$on('span-clicked', () => {
      this.functionTriggeredBySpanClick()
    })
  }