在开发组件的时候，一定会遇到组件的通信，比如点击一个图标出现弹窗和蒙层，这三个分别是不同的组件。管理他们之间的状态就成了问题。
props双向绑定
通过 sync 双向绑定，属性变化会同步到所有组件，这也是最简单的实现方式，缺点是属性会比较多。实现方式如下
App.vue 文件
component/dialog/index.vue 文件
component/dialog-icon/index.vue 文件
component/mask/index.vue 文件
自定义事件
子组件 $dispatch() 派发事件传递给父组件，父组件 $broadcast() 广播事件传递给子组件，这种方式虽然减少了props的使用，但是需要额外定义几个事件，状态多了就会变得很复杂，实现方法如下
App.vue 文件
component/dialog-icon/index.vue 文件
component/dialog/index.vue 文件
component/mask/index.vue 文件
Vuex
状态统一放store管理，修改状态通过mutations，组件通过action调用mutations，虽然有点绕，但是所有东西放一起后期会更好维护，实现方法如下
App.vue 文件
component/dialog/index.vue 文件
component/dialog-icon/index.vue 文件
component/mask/index.vue 文件
vuex/store.js 文件
const state = {
isHideMask: true,isHideDialog: true
}
const store = new Vuex.Store({
state,mutations
})
if (module.hot) {
module.hot.accept(['./mutations'],() => {
const mutations = require('./mutations').default
store.hotUpdate({
mutations
})
})
}
export default store
vuex/mutations.js 文件
default {
[HIDEDIALOG] (state) {
state.isHideDialog = !state.isHideDialog
state.isHideMask = !state.isHideMask
}
}
vuex/mutations-types.js 文件
vuex/action.js 文件
