第一步：在src/utils目錄下建立檔案bus.js

// 專門用來傳遞傳遞訊息
import Vue from 'vue'

export default new Vue()

注：公共檔案bus.js專門用來傳遞訊息

第二步：資料傳送方Child.vue

<template>
  <div>
    <h1>元件1</h1>
    <button @click="passMsg">傳遞資料給兄弟節點</button>
  </div>
</template>
<script>
  import bus 
 
from '../utils/bus'
  export default {
    name: 'Child',
    methods: {
      passMsg () {
        bus.$emit('message', 'data from Child')
      }
    }
  }
</script>

第三步：資料接收方Child2.vue

<template>
  <div>
    <h1>元件2</h1>
    來自兄弟節點的資料：{{msg}}
  </div>
</template>
<script>
  import bus 
 
from '../utils/bus'
  export default {
    name: 'Child2',
    data () {
      return {
        msg: ''
      }
    },
    mounted () {
      bus.$on('message', (data) => {
        this.msg = data
      })
    }
  }
</script>

第四步：App.vue

<template>
  <div id="app">
    <h-child></h-child>
    <h-child2></h-child2>
  </div>
</template>
<script>
  //
 
 引入子元件
  import HChild from './views/Child'
  import HChild2 from './views/Child2'

  export default {
    name: 'Parent',
    components: {
      HChild,
      HChild2
    }
  }
</script>

結果：

單擊按鈕