一淤袜、通過EventBus進(jìn)行兄弟間組件通訊

1.通過 import 引入vue公共實(shí)例

1）在main.js文件中定義一個(gè)新的eventBus對(duì)象，其實(shí)他是一個(gè)全新的Vue實(shí)例：

export const eventBus = new Vue();

2）兄弟組件A.vue

import { eventBus } from '@/main'

  //監(jiān)聽事件
  created() {
    eventBus.$on('showMenus', (arg) => {
      console.log('123'+arg);
      alert(arg);
    })
  },

3）兄弟組件B.vue

import { eventBus } from '@/main'

//分發(fā)事件傳值
 methods: {
  switchmenu:function(flag){
    eventBus.$emit('showMenus',flag); //觸發(fā)事件
    }
  }

2.通過 window傳遞vue公共實(shí)例

1）在main.js文件中實(shí)例化一個(gè)Vue對(duì)象，并把它賦值于window.eventBus,這樣eventBus就可以在任何組件中使用：

window.eventBus = new Vue();

2）兄弟組件A.vue

  //監(jiān)聽事件
export default {
  created() {
    eventBus.$on('showMenus', (arg) => {
      console.log('123'+arg);
      alert(arg);
    })
  }
}

3）兄弟組件B.vue

export default {
//分發(fā)事件傳值
 methods: {
  switchmenu:function(flag){
    eventBus.$emit('showMenus',flag); //觸發(fā)事件
    }
  }
}

二剪撬、通過父級(jí)組件進(jìn)行兄弟間組件通訊

1.父組件：

<!-- ParentCard.vue -->
<template>
    <div class="card">

        <div class="card-body">
            <brother-card :messageSon="messageson" 
              @brotherSaid="messageDaughter($event)"></brother-card>
            <sister-card :messageDaughter="messagedaughter" 
              @sisterSaid="messageSon($event)"></sister-card>
        </div>
    </div>
</template>
 
<script>
    import BrotherCard from './BrotherCard';
    import SisterCard from './SisterCard'
 
    export default {
        name: 'ParentCard',
        data: () => ({
            theCardTitle: '父組件',
            messagedaughter:'', 
            messageson:''
        }),
        components: {
            BrotherCard,
            SisterCard
        },
        methods: {
            messageDaughter(message) {
                this.messagedaughter = message;
            },
            messageSon(message) {
                this.messageson = message;
            },
            stopFighting() {
                if (this.messagedaughter && this.messageson) {
                    return true
                }
                return false
            },
            momSaidChill() {
                this.messagedaughter = '',
                this.messageson = ''
            }
        }
    };
</script>

2.哥哥組件

<!-- BrotherCard.vue -->
<template>
    <div class="message">
        <div class="message-header">
            <h5 v-text="theCardTitle"></h5>
        </div>
        <div class="message-body">
            <p class="message-text">我是Brother組件</p>
            <button @click="messageSister" class="btn">給妹妹發(fā)消息</button>
 
            <div v-if="messageSon" class="alert" v-html="messageSon"></div>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: 'BrotherCard',
        props: ['messageSon'],
        data: () => ({
            theCardTitle: '子組件1'
        }),
        methods: {
            messageSister() {
                this.$emit('brotherSaid', '媽媽說扛施，該做作業(yè)了！(^_^)!!!')
            }
        }
    }
</script>

3.妹妹組件

<!-- SisterCard.vue -->
<template>
    <div class="message">
        <div class="message-header">
            <h5 v-text="theCardTitle"></h5>
        </div>
        <div class="message-body">
            <p class="message-text">我是Sister組件</p>
            <button @click="messageBrother" class="btn">給哥哥發(fā)消息</button>
            <div v-if="messageDaughter" class="alert" v-html="messageDaughter"></div>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: 'SisterCard',
        props: ['messageDaughter'],
        data: () => ({
            theCardTitle: '子組件2'
        }),
        methods: {
            messageBrother() {
                this.$emit('sisterSaid', '媽媽說泻轰，該做作業(yè)了！(^_^)!!!')
            }
        }
    }
</script>

總結(jié)：

參考資料：Vue組件通訊：https://www.w3cplus.com/vue/component-communication.html