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 { width: 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 { width: 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 { width: 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 { width: 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>

 

页面展示