中央总线

vue经典案例

• 引入script标签使用

<div id="app">
    <c1></c1>
    <c2></c2>
</div>
var Bus = new Vue();
Vue.component('c1',{
  template:'<div>{{msg}}</div>',
  data: () => ({
    msg: 'Hello World!'
  }),
  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});
Vue.component('c2',{
  template: '<button @click="sendEvent">Say Hi</button>',
  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});
var app= new Vue({
    el:'#app'
})

通过全局的空vue实例，作为一个总线，用于监听组件A和组件B（A、B为同级组件）事件，也是可以通过该总线触发A、B中使用Bus监听的事件。

• 在脚手架中的使用

// bus.js
import Vue from 'vue'
let bus = new Vue()
export default bus

// parent component, app.vue
<template>
<div id="app">
   <v-a></v-a>
   <v-b></v-b>
</div>
</template>
<script>
import a from 'a'
import b from 'b'
export default {
  data() {
    count: 0
  },
  componens: {
    { 'v-a': a },
    { 'v-b': b }
  }
}
</script>

// A component, a.vue
<template>
<p>{{ count }}</p>
</template>
<script>
import bus from 'bus'
export default {
  data() {
    count: 0
  },
  created() {
    bus.$on(‘inscNum’, function(num = 1){
      this.count += num
    })
  }
}
</script>

// B component, b.vue
<template>
<div>
  <button @touchstart="emitCount">count</button>
</div>
</template>
<script>
import bus from 'bus'
export default {
  methods: {
    emitCount() {
      bus.$emit('inscNum', 2)
    }
  }
}
</script>