Vue 组件通信

父组件，调用子组件的方法

MenuBar.vue 子组件

export default {
	data() {
		return {
			ifSettingShow: false
		}
	},
	methods: {
		showSetting() {
			ifSettingShow = true
		},
		hideSetting() {
			ifSettingShow = false
		}
	}
}

Ebook.vue 父组件

// 给munuBar指定ref属性
<menu-bar 
	:ifTitleAndMenuShow="ifTitleAndMenuShow"
	ref="menuBar"
>
</menu-bar>
export default {
	data() {
		return {
			ifTitleAndMenuShow: false
		}
	},
	methods: {
		toggleTitleAndMenu() {
			this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
			if(!this.ifTitleAndMenuShow) { // 隐藏的
				// DOM选择器,快速调用子组件的方法
				this.refs.menuBar.hideSetting()
			}
		}
	}
}

兄弟组件间通信----bus总线的方式

给组件绑定原生事件：@click.native
组件监听事件，直接在父组件监听，不通过子组件的emit传递点击事件出来。
避免子组件，两层的传递事件。

<child @click.native='handleClick'></child>
methods: {
	handleClick: function() {
		alert('click')
	}
}
// -----------------------------------
非父子组件传值：Vuex；发布订阅模式--总线机制。
非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）
<div id="root">
	<child content="Dell"></child>
	<child content="Tom"></child>
</div>

<script>
	Vue.prototype.bus = new Vue()

	Vue.component('child', {
		data:function(){
			return {
				selfContent: this.content
			}
		},
		props：{
			content: String
		},
		template: '<div @click='handleClick'>{{selfContent}}</div>',
		methods: {
			handleClick: function() {
				// 向外触发事件
				this.bus.$emit('change', this.selfContent)
			}
		},
		mounted: function() { // 监听bus的改变
			var this_ = this; // 保存this，防止作用域发生变化了
			this.bus.$on('change', function(msg){
				this_.selfContent = msg
			})
		}
	})
	var vm = new Vue({
		el:'#root'
	})
</script>