Non-Parent-Child Component Communication

When components are deeply nested, passing data between non-parent-child components becomes complex. Besides using Vuex (opens new window) for state management, you can also use a Bus (also known as an event bus / publish-subscribe pattern / observer pattern) to achieve communication between non-parent-child components.

<div id="root">
    <child1 content="Component 1: Click me to emit value"></child1>
    <child2 content="Component 2"></child2>
</div>

<script type="text/javascript">
	Vue.prototype.bus = new Vue()
	// Every Vue prototype will have a bus property pointing to the same Vue instance

	Vue.component('child1', {
		props: {
			content: String
		},
		template: '<button @click="handleClick">{{content}}</button>',
		methods: {
			handleClick(){
				this.bus.$emit('change', 'I came from component 1~') // trigger change event and emit value
			}
		}
	})

	Vue.component('child2', {
		data() {
			return {
				childVal: ''
			}
		},
		props: {
			content: String,
		},
		template: '<button>{{content}} + {{childVal}}</button>',
		mounted() {
			this.bus.$on('change', (msg) => { // listen for change event and receive value
				this.childVal = msg
			})
		}
	})

	var vm = new Vue({
		el: '#root'
	})
</script>

In the code above, a bus property is bound to the Vue prototype, pointing to a Vue instance. After this, every Vue instance will have a bus property.

This method is not limited to sibling components -- it works between components of any relationship.

See the Pen 非父子组件间传值2（Bus /总线/发布订阅模式/观察者模式） by xugaoyi (@xugaoyi) on CodePen.