vue
/
Vue


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>子组件之间传递数据</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src='../js/vue.min.js'></script>
	</head>

	<body>
		<div id='app'>
			<foo>组件1</foo>
			<hr>
			<bar>组件2</bar>
		</div>
		<script type="text/javascript">
			//利用 eventBus 作为一个中间中转站，去实现兄弟之间的通信
			var eventBus = new Vue({});
			var foo = {
				template: `<button @click='addBar'>{{fooCount}}</button>`,
				data() {
					return {
						fooCount: 0
					}
				},
				methods: {
					addBar: function() {
						eventBus.$emit('addBar')
					}
				},
				mounted() {
					//再次借用了eventBus
					eventBus.$on('addFoo', function() {
						this.fooCount++
					}.bind(this))
				}
			}
			var bar = {
				template: `<button @click='addFoo'>{{barCount}}</button>`,
				data: function() {
					return {
						barCount: 0
					}
				},
				methods: {
					addFoo: function() {
						console.log(eventBus);
						eventBus.$emit('addFoo')
					}
				},
				mounted() {
					eventBus.$on('addBar', function() {
						this.barCount++
					}.bind(this))
				}
			}
			new Vue({
				el: '#app',
				components: {
					foo,
					bar
				}

			})
		</script>
	</body>

</html>