在开发组件的时候，一定会遇到组件的通信，比如点击一个图标出现弹窗和蒙层，这三个分别是不同的组件。管理他们之间的状态就成了问题。
props双向绑定
通过 sync 双向绑定，属性变化会同步到所有组件，这也是最简单的实现方式，缺点是属性会比较多。实现方式如下
App.vue 文件
<template>
<div id="app">
<mask :hide-mask.sync="hideMask"></mask>
<dialog :hide-dialog.sync="hideDialog" :hide-mask.sync="hideMask"></dialog>
<dialog-icon :hide-dialog.sync="hideDialog" :hide-mask.sync="hideMask"></dialog-icon>
</div>
</template><script>
import mask from './components/mask/index'
import dialog from './components/dialog/index'
import dialogIcon from './components/dialog-icon/index'
export default {
components: {
mask,
dialog,
dialogIcon
},
data () {
return {
hideMask: true,
hideDialog: true
}
}
}
</script>
component/dialog/index.vue 文件
<template>
<section class="dialog" :class="{ 'hide': hideDialog }">
<div class="dialog-close" @click="hide()"></div>
</section>
</template><script>
export default {
props: ['hideDialog', 'hideMask'],
methods: {
hide () {
this.hideDialog = !this.hideDialog
this.hideMask = !this.hideMask
}
}
}
</script>
component/dialog-icon/index.vue 文件
<template>
<section class="dialog-icon" @click="show()">点击出现弹窗</section>
</template><script>
export default {
props: ['hideDialog', 'hideMask'],
methods: {
show () {
this.hideDialog = !this.hideDialog
this.hideMask = !this.hideMask
}
}
}
</script>
component/mask/index.vue 文件
<template>
<div class="mask" :class="{ 'hide': hideMask }"></div>
</template><script>
export default {
props: ['hideMask']}
</script>
自定义事件
子组件 $dispatch() 派发事件传递给父组件，父组件 $broadcast() 广播事件传递给子组件，这种方式虽然减少了props的使用，但是需要额外定义几个事件，状态多了就会变得很复杂，实现方法如下
App.vue 文件
<template>
<div id="app">
<mask></mask>
<dialog></dialog>
<dialog-icon></dialog-icon>
