Можли ли продолжить всплытие собственных событий в vue.js?
Прокинуть на 1 уровень вверх: https://jsfiddle.net/6v6qhq00/40/А можно ли как то прокинуть это событие далее(всплытие), что бы можно было его прослушать на любом компоненте-предке, в том числе и на корневом?
если толькоthis.$root.emit('selected-menu', data) 
this.$root.on('selected-menu', callback) // и не забыть отписаться
А вообще для обмена данными между компонентами есть vuex
Если кто-то пришел сюда со страницы поисковика, то вот готовый ответ. (Текста будет много)
(Скажу сразу, я нет могу гарантировать, что все написанной мной абсолютная истина, но код рабочий)
Есть для варианта пробросить шину событий (event bus). У каждого есть плюсы и минусы. Сейчас рассмотрим оба.
1. Проброс event bus через корневой компонент $root.Vue.component('mian-container', {
	template: `<main-header ></main-header>`,
	data(){ 
		return{ 
			name: 'я <<main-header></<main-header>' 
		} 
	},
	// тут мы при создании компонента подписываем его на прослушку события 'selected-menu'
	created(){ 
		this.$root.$on('selected-menu', function (event) { 
			console.log(event.target + this.name) 
		}.bind(this)) // не забыть про .bind(this), иначе произойдет потеря контекста
	} 
})
Vue.component('main-header', {
	template: `<main-menu ></main-menu>`,
	data(){ 
		return{ 
			name: 'я <main-menu></main-menu>' 
		} 
	},
	// тут мы при создании компонента подписываем его на прослушку события 'selected-menu'
	created(){ 
		this.$root.$on('selected-menu', function (event) { 
			console.log(event.target + this.name)  
		}.bind(this)) // не забыть про .bind(this), иначе произойдет потеря контекста
	}
})
Vue.component('main-menu', {
	template: `<button @click="selectedMenu">Меню</button>`,
	methods:{
		selectedMenu(event){
			// тут мы создаем событие 
			this.$root.$emit('selected-menu', event)
		}
	}
})
new Vue({
	el: '#main'
})
1. Проброс event bus через дополнительный экземпляр Vue, например bus.// тут создаем дополнительный экземпляр Vue, 
// далее по коду используем его вместо 'this.$root'
let bus = new Vue();

Vue.component('mian-container', {
	template: `<main-header ></main-header>`,
	data(){ 
		return{ 
			name: 'я <<main-header></<main-header>' 
		} 
	},
	created(){ 
		bus.$on('selected-menu', function (event) { 
			console.log(event.target + this.name) 
		}.bind(this))
	} 
})
Vue.component('main-header', {
	template: `<main-menu ></main-menu>`,
	data(){ 
		return{ 
			name: 'я <main-menu></main-menu>' 
		} 
	},
	created(){ 
		bus.$on('selected-menu', function (event) { 
			console.log(event.target + this.name)  
		}.bind(this))
	}
})
Vue.component('main-menu', {
	template: `<button @click="selectedMenu">Меню</button>`,
	methods:{
		selectedMenu(event){
			bus.$emit('selected-menu', event)
		}
	}
})
new Vue({
	el: '#main'
})
Какой вариант выбрать, решать конечно же вам. От себя могу добить следующее:
1) способ через корневой компонент $root
(+) более лаконичный, если вы работаете с системами сборки, например webpack, то вам не придется думать о подключении дополнительного экземпляра Vue в каждый файл
(-) если у вам очень много "глобальных" событий, то будут проблемы с производительность
2) способ через дополнительный экземпляр Vue
(+) этот вариант менее чувствительный к большему количеству событий
(-) если вы работаете с системами сборки, например webpack, то вам придется помнить о подключении дополнительного экземпляра Vue в каждый файл где вы будете использовать event bus