<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非父子组件间传值（bus，总线，发布订阅模式，观察者模式）</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 实现当点击Dell时，Lee变为Dell。反过来点击Lee，Dell变为Lee -->
		<div id="app">
			<child content="dell"></child>
			<child content="lee"></child>
		</div>
		<script>
			/* 2：给vue实例挂一个bus */
			Vue.prototype.bus = new Vue()
			/* 1：声明一个全局组件child */
			Vue.component('child', {
				data: function() {
					return {
						/* 4：对父组件的参数做一个拷贝 */
						selfContent: this.content
					}
				},
				/* 3：接收父组件传过来的参数 */
				props: {
					content: String
				},
				template: '<div @click="handleClick">{{selfContent}}</div>',
				methods: {
					handleClick: function() {
						/* 5：通过bus（vue实例）向外触发事件 */
						this.bus.$emit('change',this.selfContent)
						
					}
				},
				/* 用生命周期钩子，当组件挂载的时候触发 */
				/* 6：监听5触发的事件，把自身的数据改为传递过来的数据 */
				mounted:function(){
					var this_ = this
					/* 监听触发的change事件 */
					this.bus.$on('change', function(msg) {
						this_.selfContent = msg
					})
				}
			})

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