Bubble events in Vue 2.0

dispatch.ts

/**
 * Example:
 *
 *     import Vue from 'vue';
 *     import Dispatch from './dispatch';
 *     Vue.use(Dispatch);
 *
 * @author Matt Kenefick <[email protected]>
 * @package Plugin
 * @project Your Project
 */
export default {
	install(Vue) {
		Vue.prototype.$dispatch = function (eventName, ...args) {
			let currentComponent = this;

			while (currentComponent) {
				currentComponent.$emit(eventName, ...args);
				currentComponent = currentComponent.$parent;
			}
		};
	},
};

example.vue

<template>
	<section class="example">
		<p>Note that the event from MyFile will automatically bubble up to ComponentA through B and C.</p>

		<ComponentA v-on:my-event="HandleMyEvent">
			<ComponentB>
				<ComponentC>
					<MyFile />
				</ComponentC>
			</ComponentB>
		</ComponentA>
	</section>
</template>

my-file.vue

<template>
	<section class="my-file" v-on:click="$dispatch('my-event')">
		Click Me
	</section>
</template>