場(chǎng)景

多個(gè)并行組件通訊

原理

創(chuàng)建一個(gè) new vue({}) 的 bus 對(duì)象，然后并行組件都動(dòng)態(tài)注冊(cè)在這個(gè)對(duì)象上

代碼

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  {{ message }}
  <first-banner></first-banner>
  <second-banner></second-banner>
</div>

<script lang="javascript">
  var Bus = new Vue({})

  var first = {
    template: `
      <div>
        <p @click="handleClick">firstInner組件</p>
      </div>
      `,
    name: 'first',
    methods: {
      handleClick () {
        Bus.$emit('fromFirstInner', '來自firstInner組件')
      }
    }
  }

  var second = {
    template: `
      <div>
          <p>secondInner組件: {{ message }}</p>
      </div>
      `,
    name: 'second',
    data() {
      return {
        message: ''
      }
    },
    created () {
      Bus.$on('fromFirstInner',(msg) => {
        this.message = msg
      })
    }
  }

  var app = new Vue({
    el: '#app',
    data: {
      message: 'center'
    },
    components: {
      "first-banner": first, 
      "second-banner": second
    }
  })
</script>