vue中bus的使用

新建一个bus.js文件,并在main.js引入并全局使用它

import Vue from 'vue'

const bus = new Vue({
  data: {
    number: 1
  }
})

export default {
  install() {
    Object.defineProperty(Vue.prototype, '$bus', {
      value: bus
    });
  }
}

bus.vue组件,父组件派发事件,累加bus中number的值

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item" @click="addNum">父组件派发事件----点击增加bus(number)------{{ $bus.number }}</li>
      <bus-child></bus-child>
    </ul>
  </div>
</template>

<script>
  import BusChild from './components/bus-child'
  export default {
    name: "index",
    components: {
      BusChild
    },
    methods: {
      addNum() {
        this.$bus.$emit('addNum',this.$bus.number++);
      }
    }
  }
</script>

<style scoped>
  .sdktest {
    overflow: hidden;
    background-color: #fff;
    font-size: 36px;
  }
  .sdktest-item {
     560px;
    /*height: 80px;*/
    margin: 40px auto;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #3ec7e7;
    color: #fff;
    text-align: center;
    line-height: 80px;
  }
  .sdktest-item:nth-child(2n) {
    background-color: #42cd56;
  }
</style>

bus-child组件,子组件监听事件,监听bus中number的值

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item">子组件监听事件---number：{{ $bus.number}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "bus-child",
    mounted() {
      this.$bus.$on('addNum',(payload) => {
        console.log(payload);
      });
    }
  }
</script>

<style scoped>
  .sdktest {
    overflow: hidden;
    background-color: #fff;
    font-size: 36px;
  }
  .sdktest-item {
     560px;
    height: 80px;
    margin: 40px auto;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #3ec7e7;
    color: #fff;
    text-align: center;
    line-height: 80px;
  }
  .sdktest-item:nth-child(2n) {
    background-color: #42cd56;
  }
</style>

页面展示

局部使用,不注册在全局

在页面目录下建一个bus.js文件,该文件只导出一个空的不挂载的vue实例

import Vue from 'vue'

const bus = new Vue();

export default bus;

在同一目录下建一个index.vue组件，该组件引入bus，然后利用bus.$emit方法派发事件

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item" @click="add">(父组件)点击</li>
      <middle-child></middle-child>
    </ul>
  </div>
</template>

<script>
  import bus from './bus.js'
  import MiddleChild from './components/middle-child'
  export default {
    name: "index",
    data() {
      return {
        num: 1
      };
    },
    components: {
      MiddleChild
    },
    methods: {
      add() {
        bus.$emit('add', this.num++);
      }
    }
  }
</script>

<style scoped>
  .sdktest {
    overflow: hidden;
    background-color: #fff;
    font-size: 36px;
  }
  .sdktest-item {
     560px;
    /*height: 80px;*/
    margin: 40px auto;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #3ec7e7;
    color: #fff;
    text-align: center;
    line-height: 80px;
  }
  .sdktest-item:nth-child(2n) {
    background-color: #42cd56;
  }
</style>

建一个middle-child.vue子组件,监听父组件派发过来的事件

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item">子组件监听------{{ num }}</li>
    </ul>
  </div>
</template>

<script>
  import bus from '../bus.js'
  export default {
    name: "index",
    data() {
      return {
        num: 0
      };
    },
    mounted() {
      bus.$on('add',(payload) => {
        this.num = payload;
      });
    }
  }
</script>

<style scoped>
  .sdktest {
    overflow: hidden;
    background-color: #fff;
    font-size: 36px;
  }
  .sdktest-item {
     560px;
    /*height: 80px;*/
    margin: 40px auto;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #3ec7e7;
    color: #fff;
    text-align: center;
    line-height: 80px;
  }
  .sdktest-item:nth-child(2n) {
    background-color: #42cd56;
  }
</style>

页面展示