在開發組件的時候，一定會遇到組件的通信，比如點擊一個圖標出現彈窗和蒙層，這三個分別是不同的組件。管理他們之間的狀態就成了問題。

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></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  } }, events: {  'dialog-dispatch' () {   this.hidedialog = !this.hidedialog   this.$broadcast('dialog-broadcast')  },  'mask-dispatch' () {   this.hideMask = !this.hideMask   this.$broadcast('mask-broadcast')  } }}</script>